如何将两种不同的字体大小相互对齐？

Question

如何将两个不同大小的字体彼此相邻对齐，以便较小的文本与较大的文本垂直居中？

HTML：

<div id="parent">
    <span id="first">first</span>
    <span id="second">second</span>
</div>

CSS：

#first {
    font-size: 200%;   
}

#second {
    font-size: 100%;
}

JSFiddle： http://jsfiddle.net/BmbWr/

Answer 1

您可以使用vertical-align: middle属性

http://jsfiddle.net/BmbWr/1/

Answer 2

使用line-height css属性。使用相同的线高设置第一个和第二个。

Answer 3

这很好用

#first {
  font-size: 200%;

}

#second {
    font-size: 100%;
    vertical-align:top;
    line-height:38px;
}

Answer 4

你可以这样做：

http://jsfiddle.net/BmbWr/5/

我添加了一个作为进一步的例子。