table vertically aligned centre on page ?

[CRON]

Hi all,
Anyone come across a simple, cross-browser compatible way of aligning a
table to the vertical centre of a page?
Cheers,
Ciarán

 

[Ben C]

Hi all,
Anyone come across a simple, cross-browser compatible way of aligning a
table to the vertical centre of a page?
Cheers,
Ciarán

It should work to do:

table
{
position: absolute;
height: 200px;
top: 0px;
bottom: 0px;
margin: auto 0;
}

For vertical centering to work, top, bottom and height must all be set
to lengths, and top and bottom margins to auto.

But this doesn't work in Firefox. The spec is a little ambiguous, but
something with display: table should really behave on the outside like a
block box.

You can set the same bunch of properties on a div instead, and put the
table inside the div. That works in FF.

The downside here is you need to set the height-- you can't vertically
centre a table with auto height.

 

[CRON]

Cheers for the reply Ben but im not having any joy here. I've tried it
in IE7 and FF but it doesnt seem to work in either. Maybe it's a purely
IE6 thing? Something to do with quirks mode?

 

[Ben C]

Cheers for the reply Ben but im not having any joy here. I've tried it
in IE7 and FF but it doesnt seem to work in either.

It should work in FF (putting the table inside a div as suggested).

Maybe it's a purely IE6 thing? Something to do with quirks mode?

Always use strict mode if you value your sanity.

Post a link to a simple example and I'll see if I can see why it doesn't
work in FF.

 

[CRON]

Post a link to a simple example and I'll see if I can see why it doesn't

work in FF.

OK, cheers Ben, I appreciate the effort:
http://www.keepitsafe.ie/newsiteTemp/
Nothing happens in FF - Looks wierd in IE7 - Haven't tried IE6 yet
(dont have it on this macine!)

Thanks again,
Ciarán

 

[Ben C]

OK, cheers Ben, I appreciate the effort:
http://www.keepitsafe.ie/newsiteTemp/
Nothing happens in FF - Looks wierd in IE7 - Haven't tried IE6 yet
(dont have it on this macine!)

I don't understand. I tried it in FF, and the table was there, centered
vertically in the middle of the page.

 

[Ben C]

I don't understand. I tried it in FF, and the table was there, centered
vertically in the middle of the page.

Just realized this may be a bit unclear. I mean I tried your actual
link, and looked fine.

 

[Nico Schuyt]

Anyone come across a simple, cross-browser compatible way of aligning
a table to the vertical centre of a page?

if you want to center something vertically, it's back to tables:
http://www.nicoschuyt.nl/test/center.htm

But why is it essential to center it vertically? And do you really need a
table for the contents?

 

[CRON]

ha ha oops - my bad! It was stuck to the top of the page when I tried
it yesterday but I redid it before uploading and never tested it again
in FF. It's working ok now but in IE7 it's aligned top right?! Still
havent tried IE6. There should really just be a vertical float option
in CSS for this sort of thing!

 

[CRON]

if you want to center something vertically, it's back to tables:
http://www.nicoschuyt.nl/test/center.htm

Wow, thanks Nico! I never would have thought of setting the height of
body & html tags!

But why is it essential to center it vertically?

it's not particularly important, i just think it would look better and
I use layouts like this on a lot of sites so it'l be handy in future.

And do you really need a table for the contents?

No , I don't really need a table but I'm not a purist and tables are
far easier for me to manage so there's no reason not to use them.

Thanks everyone for the help !
Ciarán