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:

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