How to align text vertically within bootstrap progress bar

Question

I modified the height of the bootstrap progress bar as you can see in the following link: http://jsfiddle.net/8Xf2j/31/

What I'm trying to make is that the text is centered vertically. I tried to add the property:

vertical-align:middle

But it does not works... I also want to increase the font size of the text containing the progress bar adding:

font-size:30px;

As you'll see in de fiddle it doesn't works too. Any idea or advice would be appreciated.

Answer 1

One way to achieve vertical alignment of a single line of text is to make the line-height match the desired height.

Example: http://jsfiddle.net/VQS2k/

.progress {
    height: 40px;
    font-size: 30px;
}
.bar {
    font-size: 30px;
    line-height: 40px;
}

Plain version (no Bootstrap): http://jsfiddle.net/VQS2k/1/