Geek asks and answers

The text in the vertical center <span>, which is located next to a much larger <span>, as inside the <div>

I am trying to vertically center some text in an element <span>with respect to a much larger one <span>, which is native to the first. Both are children of the containing parent <div>.

HTML:

<div>
    <span class="previewLabel">Preview:</span>
    <span class="previewText">The quick brown fox jumps over the lazy dog.</span>
</div>

CSS

.previewLabel {
    display: inline-block;
    line-height: 100%;
    vertical-align: middle;
}

.previewText {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 64px;
    font-style: italic;
    font-weight: bold;
}

JSFiddle: http://jsfiddle.net/5chXG/

As you can see, I already tried the trick vertical-align(s line-height, defined) described in this Q & A ("Text alignment vertically in a div") , but it doesn't seem to work. I believe the difference is that I cannot use a static value line-height.

px line-height, .previewText . , , JavaScript CSS .previewText, .

:

"Preview:" (.previewLabel) <span> <div>?

/

, .

  • , .
  • ,

, :

enter image description here

+3
2

vertical-align:middle .previewLabel .previewText .

: http://jsfiddle.net/pavloschris/5chXG/4/

+1

, , vertical-align: baseline vertical-align: middle display: table-cell. .previewLabel .

DEMO

.previewLabel {
    vertical-align: baseline;
}

span {
    display:table-cell;
}
0

More articles:


All Articles