Search code examples
csstwitter-bootstrapcenteringtext-alignment

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

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:

Resulting image of above HTML

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?

Solution

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