How to center your page with CSS - horizontally
October 9th, 2008
Centering a page horizontally is pretty easy with CSS. Vertically is a little more difficult, actually it can be a lot more difficult. I like to build websites with fixed widths, I don’t know why, but to me they just look better. I like the frame a background around the content adds to the site. Whitespace should be your friend. So, unless you want all of your webpages to sit on the absolute left edge of the browser, you’re going to want to center your page’s content horizontally.
For your HTML, you’re going to set up your page like any other, and you’re going to wrap all of your page content in a wrapper div, or a container.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Your Page Title</title>
<link rel=”stylesheet” href=”styles/default.css” type=”text/css” media=”screen” charset=”utf-8″>
</head>
<body>
<div id=”wrapper”>
your page content
</div><!–end wrapper–>
</body>
</html>
CSS
body {padding: 0; margin: 0; text-align: center; background: #369;}
div#wrapper {width: 850px; margin: 0 auto; background: #fff; text-align: left;}
That’s it, all you need to center your content on the page, but keep your text aligned to the left. For most modern browsers, the margin of auto for the left and right sides would be enough to center your content on the page, but for browsers like ie6, you have to use the text-align: center on the body tag. It doesn’t recognize the auto, but it does apply text-alignment to block elements like divs.
Tags: centering with CSS, CSS
This entry was posted on Thursday, October 9th, 2008 at 7:39 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
lollielala Says:
Leave a Reply