Satch3000 Satch3000 - 2 months ago 7
CSS Question

CSS Center text (Horizontal and Vertical) inside a DIV block

I have a

div
set to
display:block
. (
90px
height and width) and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried
text-align:center
, but it doesn't do the horizontal part so I tried
vertical-align:middle
but it didn't work.

Any ideas?

Answer

If it is one line of text and/or image, then it is easy to do. Just use

text-align: center;
vertical-align: middle;
line-height: 90px;       /* the same as your div height */

that's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/ Look for "vertical align".

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.