在一个<div>中，如何将一个较大的<span>旁边的文本<span>垂直居中？

Question

我正在尝试在一个<span>元素中垂直居中一些文本，相对于第一个元素的兄弟元素，这个兄弟元素比第一个元素要大得多。它们都是包含父元素<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/

如您所见，我已经尝试了在这个问题的问答页面中描述的使用vertical-align技巧（定义了line-height）, 但似乎并没有起作用。我认为问题在于我无法使用静态的line-height值。

由于.previewText可以动态地改变大小，因此我不能为line-height属性使用px值。在实际代码中，页面上有控件来更改字体属性，而JavaScript将在更改这些内容时调整.previewText的CSS。

我的问题：

如何使“预览：”文本 (.previewLabel) <span> 垂直居中在父元素 <div> 中？

编辑 / 澄清

我希望所有文本都像单行文本一样表现。

• 换行应导致大文本在小文本下方流动。
• 小文本应仅在较大文本的单行高度内垂直对齐，而不是多行。

下面是我想要实现的可视化效果：

- Jesse Webb

---

你的意思是像这样 http://jsfiddle.net/j08691/5chXG/1/ 吗？ - j08691

@j08691 有点像，但这样看起来就像是两个不同的元素。我想让它看起来像一条连续的线。因此，大文本仍将在小文本下换行，而小文本仅垂直对齐于大文本的一行中间。希望这样说得清楚... - Jesse Webb

将 vertical-align: middle 更改为 vertical-align: baseline。 - brouxhaha

Answer 1

在.previewLabel和.previewText上都添加vertical-align:middle就可以正常工作。

这里有一个演示链接：http://jsfiddle.net/pavloschris/5chXG/4/

- xpy

---

谢谢，但这不完全是我要找的。如果我的问题不清楚，很抱歉。我希望所有的文本都像一行一样流动。请参见此评论。 - Jesse Webb

那么你只需要在它们两个上面添加 vertical-align:middle，这样行不行？ - xpy

实际上，在两个span中添加vertical-align:middle似乎就可以解决问题了！你之前的答案/代码看起来不对，所以我认为它是错误的，抱歉。谢谢！ - Jesse Webb

另外，你能解释一下为什么这样做有效吗？我本来不指望需要垂直对齐占据整个容器高度的元素。为什么这会有所不同呢？ - Jesse Webb

简言之，vertical-align 描述了如果 inline-elements 并排放置，它们将如何垂直对齐。它与其父元素无关。 - xpy

Answer 2

如果您想让左侧单行文本与右侧多行文本的第一行对齐，您需要使用vertical-align: baseline而不是vertical-align: middle，并且还要使用display: table-cell。 .previewLabel不需要设置行高。

DEMO

.previewLabel {
    vertical-align: baseline;
}

span {
    display:table-cell;
}

- brouxhaha

---

您的演示使“previewText <span>”中的文本似乎不是与标签相同的文本行。我希望它表现得像单行文本一样。请参见此评论。 - Jesse Webb

另外，在我的浏览器（Firefox）中，“预览：”文本仍未垂直居中，仍会出现在行底部。 - Jesse Webb

是的，从你的解释中我认为你想让它对齐到第一行的底部。你包含的那张图片会更好地帮助我理解你所寻求的准确内容。我很高兴你能得到有用的答案。 - brouxhaha