CSS中文本的垂直对齐

Question

我正在尝试将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;
}

http://jsfiddle.net/ypLN5/

我尝试了几行使用line-height和vertical-align：middle但我没有提出解决方案。

祝你有帮助吗？

Answer 1

有一种非常简单的方法：

i, span{
    vertical-align:middle;
}

Demo fiddle

Answer 2

SW4的回答是正确的。

虽然如果您希望使用display: table-cell将更大元素放在一个内部并且可以解决您的问题：

http://jsfiddle.net/3U2Vj/1/