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: ```

× Congrats! You have successfully did it!.

``` And the result is: As you'll can see that the text alignment is at the top of the `

`. 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?

Accepted Answer

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.

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

Solution

Problem