How to center a table vertically

[sationus]

Hello,

I am not 100 percent good w/ php or css... but I use the web well and I am able to find what I need, but this one little thing.


I have a website, and its only a box that I want in the middle of the screen, everything in this box is in a table.

But what I need to be able to do is, to put in the the middle of the screen, no matter if you are running 800x600 or 1920x1200 res. I want it always in the middle of the screen, I can get it for one, but any time I change, its either higher or lower...

any help would be greatful :)

thanks

[ak1dnar]

Welcome to the TheScripts.com, sationus !

I think you can get answers from HTML/CSS forum rather than Php forum. So I'll move this from Php Forum. Thanks!

[Atli]

Hi sationus. Welcome to TSDN!

I have edited the title of the thread. Please try using descriptive thread titles and avoid using phrases like 'please help'. Threads with poor titles actually receive FEWER responses!

Check out our Posting Guidelines for more information on TSDN posting policies.

[sationus]

Hi sationus. Welcome to TSDN!

I have edited the title of the thread. Please try using descriptive thread titles and avoid using phrases like 'please help'. Threads with poor titles actually receive FEWER responses!

Check out our Posting Guidelines for more information on TSDN posting policies.

ok sounds good, sorry bout that

[markrawlingson]

Probably the best way to do this is to use javascript because you can access the screen height/width since it is a client side language. From there, it's a simpe mathematics issue.

Once you know the screen dimensions (ie: 800/600, 1025/768, etc) - the middle of the screen is width/2 or height/2 right? That's half the equation. The other half is finding the height and width of your box object, if you want the box to be in the middle then the equation you want to find both the middle of the screen, and the middle of the object, subtract - and VOILA!

Try the following:

function doCenter() {
     var obj = document.getElementById('yourelementsid');
     obj.style.top = (screen.height/2) - (obj.style.height/2);
     obj.style.left = (screen.width/2) - (obj.style.width/2);
}
document.onload = doCenter;
 

I employ this method whenever i open a popup window so that the popup centers right smack dab in the middle of the screen, no matter what screen resolution the user has.

Hope that helps!
Sincerely,
Mark