css - How to align text vertically within bootstrap progress bar -
i modified height of bootstrap progress bar can see in following link: http://jsfiddle.net/8xf2j/31/
what i'm trying make text centered vertically. tried add property:
vertical-align:middle
but not works... want increase font size of text containing progress bar adding:
font-size:30px;
as you'll see in de fiddle doesn't works too. idea or advice appreciated.
one way achieve vertical alignment of single line of text make line-height
match 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/