Bootstrap vertically center text in 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

You have to add display: inline-block

Answer 2

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 3

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

h3 .fa {
    vertical-align: middle;
}

http://jsfiddle.net/22cYh/

Answer 4

Vertical align goes onto the img, not the text.