By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,188 Members | 832 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,188 IT Pros & Developers. It's quick & easy.

Vertical alignment on large resolution

P: 30
Hi All,

How can I align table/DIV in middle on large resolutions?

Just go to this link, my portfolio

And this on large resolution, it is coming on top of the page.

I want to align page content to middle of the browser height.

Thanks in advance
Oct 9 '06 #1
Share this Question
Share on Google+
4 Replies


P: 3
The only way I know how to do it would be to put it in a table with valign set to "middle" and height="100%"
Oct 9 '06 #2

jaymanson
P: 29
Here's a fairly simple trick to do this with CSS:

First, the HTML file:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6.    <title>Untitled Document</title>
  7.  
  8.    <!-- Link to your CSS style sheet here -->
  9.    <link href="test.css" rel="stylesheet" type="text/css" />
  10.  
  11. </head>
  12.  
  13. <body>
  14.  
  15.    <div id="pixel">
  16.  
  17.       <div id="wrapper">
  18.  
  19.          <!-- Put your site content in here -->
  20.  
  21.       </div>
  22.  
  23.    </div>
  24.  
  25. </body>
  26.  
  27. </html>
and the CSS:

Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3. /* First we make a 1x1 pixel container div.
  4. The 50% / 50% absolute positioning centers it on the screen
  5. The overflow ensures anything inside it will spill out to fill the screen */
  6.  
  7. #pixel {
  8.     width: 1px;
  9.     height: 1px;
  10.     position: absolute;
  11.     top: 50%;
  12.     left: 50%;
  13.     overflow: visible;    
  14. }
  15.  
  16. /* Now we make the wrapper to hold your site content.
  17. It can be any width or height, but the 'right' positioning value must be 
  18. set to half the 'width' and the 'bottom' value set to half of the 'height' */
  19.  
  20. #wrapper {
  21.     width: 400px;
  22.     height: 240px;
  23.     position: relative;
  24.     right: 200px; 
  25.     bottom: 120px;
  26. }
I've put explanations inside the code. This is all CSS - no tables required :-)

Let me know if you have any problems.

- Jay
Oct 10 '06 #3

jaymanson
P: 29
Actually, when I think about it, this would be slightly better:

Expand|Select|Wrap|Line Numbers
  1. #wrapper {
  2.     width: 400px;
  3.     height: 240px;
  4.     position: relative;
  5.     right: 50%; 
  6.     bottom: 50%;
  7. }
Setting the right and bottom values to 50% saves having to work it out (not that it's hard to half something, but it does leave less possibility for error!)

Jay
Oct 10 '06 #4

jaymanson
P: 29
Actually, when I think about it, this would be slightly better:

Expand|Select|Wrap|Line Numbers
  1. #wrapper {
  2.     width: 400px;
  3.     height: 240px;
  4.     position: relative;
  5.     right: 50%; 
  6.     bottom: 50%;
  7. }
Setting the right and bottom values to 50% saves having to work it out (not that it's hard to half something, but it does leave less possibility for error!)

Jay
Scratch that last post - the 50% thing works in IE but not in FF! Looks like you'll have to get the calculators out and do it the first way I suggested lol

It's 1am here and obviously way past my bedtime now!
Oct 10 '06 #5

Post your reply

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