Austin Web Design Blog

How to Center Your Web Page Layout Using CSS

If you are creating a fixed-width web page, you may have run into the problem of the page aligning to the left side of the browser window. This can be frustrating in a div-based layout, but the fix is very simple when you know the trick. Follow these easy steps to center your web page:

First, add text-align: center to the body styles in your stylesheet:

body { text-align: center }

Next, you will need to make sure to set the margin style for left and right on your containing div to auto:

#container { margin: 0 auto; }

This tells the container to have a top and bottom margin of 0 and left and right margin auto, or to just divide the remaining window width in half to place on either side of your page.

Your web page should now be centered, though there is one more problem you may have noticed. Adding the style text-align: center to the body tag will align all content of each div to center unless otherwise specified. Add text-align: left to the container div styles:

#container { margin: 0 auto; text-align: left }

This is one easy way to help you gain more control of the look of your web page, and it allows you to have standards-compliant code as well.

Mon, 24 Jan 2011 08:35

Tags , , , , , , , ,

Comment How to Center Your Web Page Layout Using CSS