4

I am trying to vertically center some text in a <span> element, in relation to a much larger <span> that is a sibling of the first one. Both are children of a containing parent <div> element.

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 vertical-align trick (with the line-height defined) that is described in this Q&A ("Text vertical align in a div") but it doesn't seem to work. I think the difference is that I can't use a static line-height value.

I can't use a px value for the line-height property because the .previewText span can change sizes dynamically. In the real code, there are controls on the page to change the font properties and JavaScript will adjust the CSS of the .previewText while you change things.

My Question:

How can make the "Preview:" text (.previewLabel) <span> be vertically aligned in the middle of the parent <div> element?

Edit / Clarification

I would like ALL of the text to behave as a single line of text normally would.

  • Wrapping should cause the big text to flow under the smaller text.
  • The smaller text should only be vertically aligned within the height of a single line of larger text, not multiple lines

Here is a visualization of what I am trying to achieve:

enter image description here

Community
  • 1
  • 1
Jesse Webb
  • 43,135
  • 27
  • 106
  • 143
  • You mean like this http://jsfiddle.net/j08691/5chXG/1/? – j08691 Feb 19 '14 at 18:00
  • @j08691 Sort of, that makes it look like 2 different elements though. I wanted it to look like one continuous line. So the big text would still wrap under the little text and the little text would only be vertically aligned to the middle of 1 line of big text. Hope that makes sense... – Jesse Webb Feb 19 '14 at 18:02
  • Change `vertical-align: middle` to `vertical-align: baseline` – brouxhaha Feb 19 '14 at 18:06

2 Answers2

2

Adding vertical-align:middle to both .previewLabel and .previewText will work just fine.

And here is a fiddle for proof: http://jsfiddle.net/pavloschris/5chXG/4/

xpy
  • 5,481
  • 3
  • 29
  • 48
  • Thanks, but this isn't exactly what I am looking for. Sorry if I was not clear in the question. I want all of the text to flow like 1 line. See [this comment](http://stackoverflow.com/questions/21888515/vertically-center-span-text-which-is-beside-a-much-larger-span-both-inside#comment33144820_21888515). – Jesse Webb Feb 19 '14 at 18:52
  • Then you should just add `vertical-align:middle` to both of them, doesn't that work for you? – xpy Feb 19 '14 at 18:56
  • Indeed, adding `vertical-align:middle` to both spans seems to do the trick! Your previous version of the answer/fiddle didn't look right to me so I thought it was wrong, sorry. Thanks! – Jesse Webb Feb 19 '14 at 19:20
  • Also, could you explain *why* this works? I wouldn't expect to need to vertically align the element which is the full height of the container. Why is that making a difference? – Jesse Webb Feb 19 '14 at 19:21
  • 1
    In plain words, `vertical-align` describes the way that `inline-elements` will be vertical aligned with each other if put side by side. It has nothing to do with their parent element. – xpy Feb 19 '14 at 20:23
0

If you want the left one-line text to align to the first line of multi-line text on the right, you need to use vertical-align: baseline instead of vertical-align: middle along with display: table-cell. .previewLabel doesn't need a set line-height.

DEMO

.previewLabel {
    vertical-align: baseline;
}

span {
    display:table-cell;
}
brouxhaha
  • 4,003
  • 1
  • 19
  • 22
  • Your demo is making the text in the "previewText ``act as if it isn't the same line of text as the label. I would like it to act as though it is a single line of text. See [this comment](http://stackoverflow.com/questions/21888515/vertically-center-span-text-which-is-beside-a-much-larger-span-both-inside#comment33144820_21888515). – Jesse Webb Feb 19 '14 at 18:54
  • Also, in my browser (Firefox) the "Preview:" text is still not vertically aligned in the middle; it still appears at the bottom of the line. – Jesse Webb Feb 19 '14 at 18:55
  • Yeah, from your explanation I thought you wanted it aligned to the bottom of the first line. That image you included would have helped me better understand exactly what you were looking for. I'm glad you were able to get a helpful answer. – brouxhaha Feb 19 '14 at 19:54