4 replies [Last post]
florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 12 years 33 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

back in the table days ( Wink ) i used to use <table height="100%" align="center"><tr><td>text at the center of the page</td></tr></table> to center text in a page.

now that i've added DTD to my page, that doesn't even work anymore !

centering horizontally with text-align is easy, but what about vertical centering ?

I'm a perfectionist
and perfect is a skinned knee

Deanimal
Offline
Regular
Last seen: 16 years 13 weeks ago
Timezone: GMT-4
Joined: 2003-04-16
Posts: 17
Points: 0

vertical centering

There are 2 things to do. First you need to get the outer table to stretch to fill the full height of 100%. The kind folks at Mozilla have decided height:100% is not an official specification, so you need to trick the browser by making it run in quirks mode by using this DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Then use vertical-align:middle to align the contents of the table cell:

table {height: 100%;}
table td {vertical-align: middle;}

Dean

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 12 years 33 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

vertical centering

is there absolutely no solution with an html 4.01 strict doctype ?

I'm a perfectionist
and perfect is a skinned knee

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 6 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

vertical centering

Unfortunately, there's no good, standard way of achieving this, but there are some hacks that can do the job in at least some browsers...

Take a look at:

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

http://www.milov.nl/forum/1/28

Anonymous
Anonymous's picture
Guru

vertical centering

Well... these two links are great to center a box of a known (and fixed) height. But what do I do if the text I want to center sometimes is one paragraph and sometimes ten paragraphs long?