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/

我试过了一些关于行高和垂直对齐的事情：中间，但是我还没有提出解决方案。

你能帮忙吗？

Answer 1

有一种非常简单的方法：

i, span{
    vertical-align:middle;
}

演示小提琴

Answer 2

SW4的答案是正确的。

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

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