html - Bootstrap 在 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>

我设置了 line-height和 font-size字形图标和 h3与 48px 相同的值然后应用vertical-align: middle;到 <span>包含字形图标。

编辑:

取自Bootstrap API website , 你不应该将类与 <span> 混在一起，正如你似乎拥有的:

Don't mix with other components Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested and apply the icon classes to the <span>.