Absolute Centre Vertical Table

jonathen

Hi all,

I know this isn't a PHP question, but it's driving me nuts trying to find the answer to such a simple question, I'm sure someone here will know the answer:

How do I make a table vertically centered within an html page, so that regardless of the browser size, the table will remain dead centre in the page (vertically)? I know it's possible, as I did it once, but I can't remember how.

Any help appreciated - sorry for asking such a simple question, but I just can't figure out how to do this!

Jonathen

Kerry_Kobashi

Try this... pulled this from my old notebook....

To center vertically:

body { text-align: center; }
frame { margin: 0px auto; height: 100% }

We set frame to fit snugly around the browser's display area. We make its height 100% to snap to the browsers height and the auto to make it snap to the width.

For some reason opera/netscape/mozilla doesn't seem to care about width: 100%

jonathen

I see what you're saying, but don't see how a 100% height frame will make any difference. The frame still has to call a page, and that page will displaynthe table, which will still not be vertically centered. Or am I missing something here?

Kerry_Kobashi

I just realized something... I didn't explain the frame class correctly. The frame isn't what you think it is in HTML <frame> tag. Its a class descriptor for a table that encapsulates another table within it.

Try the following:

<html>
<head>
<title>test</title>
<style>
body { padding: 0px; margin: 0px; text-align: center; }
.frame { margin: 0px auto; height: 100%;}
.inner { width: 100%; }
</style>
</head>

</td>
</tr>
</table>

</body>
</html>

Please test in various browsers and post your results here. List the browser name and version number.

Thanks!

jonathen

That works perfectly in ie6 - not tried in other browsers yet; will let you know results when I do.

Thanks for that - sorry to have sounded dim, but I'm sure you know what it's like trying to solve something you can't get your head around, and it is almost always the simplest problems that are the worst!

Thanks again,

Jonathen

Kerry_Kobashi

Tested:

Opera 6.05 ............ OK
IE 5.5 ............ OK
Netscape 7.0 ............. OK

Anybody else who sees this message, please test the code out and report.

In particular Netscape 3.x - 7.0 needs testing as well as IE 3.x+
Mozilla/AOL/Opera prior to 6.05 needed

Thanks.