垂直居中< span>在< div>内部的文本，这些文本都远大于< span> [英] Vertically center <span> text which is beside a much larger <span>, both inside a <div>

问题描述

我试图将< span> 元素中的某些文本垂直居中，相对于更大的< span> code>这是第一个兄弟的兄弟姐妹。它们都是包含父元素< div> 元素的子元素。 HTML：



 < div> 
< span class =previewLabel>预览：< / span> 
< span class =previewText>快速的棕色狐狸跳过懒狗。< / 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：

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:

解决方案

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/

这篇关于垂直居中< span>在< div>内部的文本，这些文本都远大于< span>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！