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

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.