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

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值。

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

我的问题：

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

编辑/澄清

我希望文本的 ALL 通常表现为单行文本。

• 环绕应该会导致大文本在较小的文本下流动。
• 较小的文本只应在单行较大文本的高度内垂直对齐，而不是多行

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

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;
}