Rookie question: center webpage on screen

mike123abc · February 13th, 2012, 05:20 AM

Hi,

I usually use tables to format my html page. Question: How do I CENTER my page on the display (with or without tables), I mean, when the width of my webpage is less wide than the total width of the user's display (say, 1280 px vs 1440, or VGA vs. XGA etc.) ?

There should be an align="center" to be put somewhere, but it's scope MUST be the WHOLE page.

Thanks,

Mike

Imar · February 13th, 2012, 05:26 AM

Hi there,

You can create a <div> with a fixed width and set its margin to auto. E.g.:

Code:

 
<body>
  <div class="PageWrapper">
    Content here
  </div>
</body>

And the CSS:

Code:

 
.PageWrapper
{
  width: 800px;
  margin: auto;
}

margin: auto distributes the available space equally between the left and right side, effectively centering your content on the browser's screen.

Cheers,

Imar

mike123abc · February 13th, 2012, 05:41 AM

Thanks, Imar. Not so evident to me

!

Mike