如何对齐两个不同的字体大小？答案

【问题标题】：How to align two different font-sizes next to each other?如何对齐两个不同的字体大小？
【发布时间】：2012-01-24 11:30:21
【问题描述】：

如何将两种不同大小的字体并排对齐，以使较小的文本与较大的文本垂直居中？

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/

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用行高 css 属性。将第一个和第二个设置为相同的行高。

【讨论】：

【解决方案3】：

这很好用

#first {
  font-size: 200%;

}

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

【讨论】：

【解决方案4】：

你可以这样做：

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

【讨论】：