Posts Tagged ‘centering with CSS’

How to center your page with CSS - horizontally

Thursday, 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: ,
Posted in CSS | 2 Comments »