Vertically align more than one line of text?

Question

I'm using:

#leftfoot {padding-left: 20px; vertical-align: middle;}

It does not work. I've look at plenty of explanations, none of them seem to work for me. Does anybody else know how to vertically align more than one line of text?

Shakes fist angrily at CSS.

`#leftfoot {display:table-cell;padding-left: 20px; vertical-align: middle;}` — Vucko, May 14 '13 at 12:51
http://jsfiddle.net/hFFsZ/ I hope I'm doing everything right... — Zevoxa, May 14 '13 at 12:59
I really do not know why it didn't work the first time you told me that... I must have been doing something wrong. Thanks though. Works fine now. — Zevoxa, May 14 '13 at 13:05

score 1 · Accepted Answer · answered May 14 '13 at 12:58

#leftfoot {
    height: 110px;
    display:table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

Your issue is the following: Your text was indeed centered vertically, but your inner div had just the same height as the text and was not extending to the bounds of the outer div, so you have to set a height for the inner div to work.

score 1 · Answer 2 · answered May 14 '13 at 13:02

1

Your question is not clear, create a JsFiddle. For better understanding of Vertical-align http://css-tricks.com/what-is-vertical-align/

answered May 14 '13 at 13:02

Nobal Mohan

466
7
20

found a similar question too http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css?rq=1 – Nobal Mohan May 15 '13 at 05:07

Vertically align more than one line of text?

2 Answers2