Vertically center vertical text

Question

I have some vertical texts and I can't center then vertically inside their divs. Here's an example: http://jsfiddle.net/hThGb/2657/

See the 3 divs (2 orange and 1 red). The texts inside the divs aren't vertically centered, making the texts leak outside of the divs.

I have tried with vertical-align: middle but that won't do anything.

How can I center vertically a vertical text inside a div?

Answer 1

If you text inside the boxes can be in a single line than you can use the line-height property to align them vertically.

use the line-height:(height of the container)

JS Fiddle Demo