471,598 Members | 1,306 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

How to center a table vertically

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
Aug 31 '07 #1
4 1897
ak1dnar
1,584 Expert 1GB
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!
Aug 31 '07 #2
Atli
5,058 Expert 4TB
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.
Aug 31 '07 #3
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
Aug 31 '07 #4
markrawlingson
346 Expert 100+
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:

Expand|Select|Wrap|Line Numbers
  1. function doCenter() {
  2.      var obj = document.getElementById('yourelementsid');
  3.      obj.style.top = (screen.height/2) - (obj.style.height/2);
  4.      obj.style.left = (screen.width/2) - (obj.style.width/2);
  5. }
  6. document.onload = doCenter;
  7.  
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
Aug 31 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

27 posts views Thread by FL | last post: by
10 posts views Thread by Unknown User | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.