垂直居中 <span> 文本，位于更大的 <span> 旁边，都在 <div> 内

Question

我试图将<span> 元素中的一些文本垂直居中，相对于更大的<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/

如您所见，我已经尝试了this Q&A ("Text vertical align in a div") 中描述的vertical-align 技巧（定义了line-height），但它似乎不起作用。我认为不同之处在于我不能使用静态的line-height 值。

我不能为line-height 属性使用px 值，因为.previewText 跨度可以动态更改大小。在实际代码中，页面上有控件可以更改字体属性，而 JavaScript 会在您更改内容时调整 .previewText 的 CSS。

我的问题：

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

编辑/澄清

我希望 所有 文本的行为与通常的单行文本一样。

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

这是我想要实现的目标的可视化：

Answer 1

将vertical-align:middle 添加到.previewLabel 和.previewText 就可以了。

这是一个证据：http://jsfiddle.net/pavloschris/5chXG/4/

Answer 2

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

DEMO

.previewLabel {
    vertical-align: baseline;
}

span {
    display:table-cell;
}