在div中引导垂直居中的文本

Question

我正在尝试将div中的文本垂直居中，但我无法使其正常工作。

代码：

<div>
    <h3><i class="fa fa-cloud fa fa-3x"></i> Text</h3>
</div>

有人有解决方案吗？我尝试了很多可能性，但似乎都没有。

Answer 1

这就是我最终将云形图集中在一起的方式：

<强> CSS

<style>
    h3 {
        line-height: 48px;
    }
    span {
        vertical-align: middle;
    }
    .glyphicon-cloud {
        font-size: 48px;
    }
</style>

<强> HTML

<div>
    <h3>
        <span class="glyphicon glyphicon-cloud"></span>
         Text
    </h3>
</div>

我将glyphicon的line-height和font-size以及h3设置为48px的相同值，然后将vertical-align: middle;应用于<span>包含glyphicon。

修改

取自Bootstrap API website，您不应该像<span>那样将课程混合在一起，如您所见：

  

不要与其他组件混在一起   图标类不能直接与其他组件组合。它们不应与同一元素上的其他类一起使用。而是添加嵌套并将图标类应用于<span>。

Answer 2

我建议vertical-align: middle应用你的图标字形。例如：

h3 .fa {
    vertical-align: middle;
}

http://jsfiddle.net/22cYh/

Answer 3

垂直对齐进入img，而不是文本。

Answer 4

您必须添加display：inline-block