How do I align text to the middle of an element with CSS in Twitter Bootstrap?

Question

I am using Bootstrap alerts and this is my success alert message:

<div class="alert alert-success" id="UploadSuccess">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Congrats!</strong> You have successfully did it!.
</div>

And the result is:

As you'll can see that the text alignment is at the top of the <div>. So, how would II align it to the middle?

I have tried using padding-top and vertical-align:middle but neither works (I end up with the same result).

What do I need to do to change the vertical alignment of the text?

Answer 1

Trying to vertically center text text is a common issue. Normally this wouldn't work on normal boxes, but you can force it to work with vertical align:

vertical-align: middle;
display: table-cell;

However this will not work in IE7 and lower.

If you are sure the text you want to display you could use line-height to fake the effect like this:

height: 40px;
line-height: 40px; /* same as height */

This way works cross browser and has support up to IE5.5 I believe. If this is not an option I'm afraid you're out of luck (it can't be done).

As a side note that error message suffers from bad grammar, it should be "Congratulations! You have successfully done it.".

Answer 2

Make the line-height of the div the same as the height of the div, eg:

#UploadSuccess { height: 20px; line-height: 20px; }

This will only work if you have one line of text.

Answer 3

Make it easier ;) ! Try to use alert-block ! That works fine with latest Bootstrap version !

<div class="alert alert-block alert-success" id="UploadSuccess">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Congrats!</strong> You have successfully did it!.
</div>