引导文本在div中垂直居中

Question

I'm trying to vertically center text in a div, but I can't get it working.

The code:

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

Does anyone have a solution for this? I tried many possibilities but none of them seem to work.

Answer 1

This is how I ended up centering the cloud glyphicon:

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>

I set the line-height and font-size of the glyphicon and h3 to the same value of 48px and then applied vertical-align: middle; to the <span> that contained the glyphicon.

edit:

Taken from the Bootstrap API website , you shouldn't mix classes with the <span> , as you seem to have:

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> .

Answer 2

I would suggest vertical-align: middle applied your icon glyph. For example:

h3 .fa {
    vertical-align: middle;
}

http://jsfiddle.net/22cYh/

Answer 3

垂直对齐到img上，而不是文本上。

Answer 4

您必须添加显示：inline-block