To centre a CSS layout horizontally, you need to add margin: 0 auto;
to either the body
or a containing element (it's generally a good idea to wrap your whole layout in a containing element and give it a meaningful ID like #wrapper
or #container
) and give that element a width. What that does is set the left and right margins to automatically take up the window space not occupied by the specified width.
For IE5 browsers we also have to add text-align: center;
to the same element. This also centres anything in descendant elements so if you don't want your text centred, you then have to reset the text-align
back to left on a descendant element. So you might set the auto margins and text-align: center;
on the body
but then set the text-align
back again on #container
.