Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Web Design and Content Tutorials : How To Center Text Vertically with CSS

[BigBison]

Unfrozen Caveman Webmaster here with a tip!

When I designed with table-based layout, I designed many layouts with blocks of text vertically centered in a table cell. Piece of cake! Unfortunately, css doesn't seem to provide an easy alternative, although I'm very new to table-free css layout. I have come across two methods (hacks, whatever).

To vertically center a single line, set its line-height to the height of the element you are centering it in.

For blocks of content, today I stumbled across the following solution, which is so elegant and well-presented I thought I'd share it here:

www.wpdfd.com/editorial/thebox/deadcentre4.html

[jbielski]

thats a good hack, thanks for sharing

[aarontwc]

Thanks for sharing. But I don't really understand

[Website Rob]

The caring is in the sharing.  The learning is in the doing.  

[VolkNet]

Thanks! I've been looking for something like this!

[rogueslayer]

Thanks for sharing! I've always wondered how to do this

[peynir]

Nice tip. Thanks for sharing

[Rman2003]

I bet I've gone through 4 can's of Mt. Dew messing with that, trying to get it to work before coming across this article... now I'm too wired to sleep... might as well go do some more work! Thanks.

[cj-hosting]

Cheers dude. I use this on my domain name registration 'please wait' page.

[LogoMaid.com]

Nice one

Jan

[openXS]

Good hack. Thanks BigBison!

[dale4ever]

yeah thanks for sharing

[pdesigns]

Wow nice hack, I've been looking for something like this for a loong time. thnx a bunch

[Liquid Smoke]

pretty cool

i used to just have like a bottom or top margin until its centered