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

Answer 2

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>

Answer 3

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.