【问题标题】：Vertical align of text in CSSCSS中文本的垂直对齐
【发布时间】：2014-04-13 18:45:01
【问题描述】：

我正在尝试将 Fontawsome 图标 (http://fortawesome.github.io/Font-Awesome/) 与旁边的一些文本对齐。在这种情况下，一个电话号码旁边是一个 - 你猜对了 - 电话图标。

HTML

<p>
    <i class="fa fa-3x fa-phone-square"></i>
    <span class="phone">111 222 333</span>
</p>

CSS

.phone {
    font-size: 1.5em;
    vertical-align: middle;
}

我尝试了几种使用 line-height 和 vertical-align: middle 的方法，但我还没有找到解决方案。

你能帮忙吗？

【问题讨论】：

【解决方案1】：

SW4 的答案是正确的。

尽管如果您希望使用 display: table-cell 将更大的元素居中并解决您的问题：

【讨论】：

【解决方案2】：

有一种非常简单的方法：

i, span{
    vertical-align:middle;
}

Demo fiddle

【讨论】：