How to center your layout in CSS
January 5, 2009
If you are using a screen resolution of 1024×768 or greater then you probably know how irritating it can be when the website you are looking at is stuck over on the left side of the screen. As well as being annoying for the reader, a nicely designed layout can loose so much of its appeal by being aligned to the left side of the screen.
However centering your layout in CSS can be a challenge to those making the transition from tables. When working with tables, all you needed was the attribute align=”center” but css handles this differently. Using margin:auto as a css style for your main div will do the trick in most browers but not in IE5.5 and IE6.
You could of course just ignore this in the hope that everyone will upgrade soon, but if it’s accessibility perfection you’re after, using the text-align attribute is the way to work around this problem.
Add text-align:center to your body style. This will center your main div but will also cause everything within your <body></body> to be centered, so adding: text-align:left to the style of your main div will counteract the overall centering.
Your page code should look something like this:
Add any other styles such as width, background and font selectors to the body and main div.
Filed under: How to, Web Design | Comments (0)
