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>

enter image description here

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

first thought is `line-height` value is too low and second thought is that you need to set the `vertical-align` property of the icon to `middle`. — Joseph Marikle, May 12 '14 at 20:20

score 2 · Answer 1 · edited May 12 '14 at 20:33

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

edited May 12 '14 at 20:33

Joseph Marikle

76,418
17
112
129

answered May 12 '14 at 20:31

royhowie

11,075
14
50
67

@JosephMarikle Pshhh, I can't see the `inline code` because it's a block quote =) – royhowie May 12 '14 at 20:34
lol sorry for the hasty edit there. It was not showing the text at all before, so adding the backtick characters makes it visible. I hope you don't mind. – Joseph Marikle May 12 '14 at 20:36
@JosephMarikle Nah, it's cool. I just thought it was funny since I was looking at the edit and was trying to figure out what changed. – royhowie May 12 '14 at 20:38

score 1 · Accepted Answer · answered May 12 '14 at 20:31

1

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

h3 .fa {
    vertical-align: middle;
}

http://jsfiddle.net/22cYh/

answered May 12 '14 at 20:31

Joseph Marikle

76,418
17
112
129

score 0 · Answer 3 · answered May 12 '14 at 20:28

0

Vertical align goes onto the img, not the text.

answered May 12 '14 at 20:28

user3618095

42
1
1
5

The cloud is not an image, it's awesome-font. – user3425765 May 12 '14 at 20:29
I'm sure he meant the font-awesome glyph. He's actually correct. – Joseph Marikle May 12 '14 at 20:31

score 0 · Answer 4 · answered May 12 '14 at 20:40

0

You have to add display: inline-block

answered May 12 '14 at 20:40

Alexxander.Gor

48
5

Bootstrap vertically center text in div

4 Answers4

Linked