Tag Archives: web development

Getting an HTML webpage to centre in all browsers

This is something I’ve got cross about faaaar too many times, so here is a simple explanation, for my reference and yours.

1) IE (being completely pants) requires that you text-align: center; the body element. You can do this in CSS:

body {
margin:0px;
text-align: center; /* align for IE */
}

…or in the tag itself:
<body style="margin:0px;text-align:center;">

2) Next, you need to undo that so that your text is left-aligned and actually centre your main wrapper div (using auto margins), as follows (again in a stylesheet or in the HTML itself):

div#maindiv {
margin:0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
width:1000px; /* or some other value */
border:0;
padding:0;
}

I like making my main div as thin as possible for the content, specified in pixels, so that the page works seamlessly on any size screen above that value. At the moment I tend to use a value around 800; wide enough for a sidebar and content, keeping up the good old LaTeX tradition of only having a thin column of text for readability, but that’s just a personal preference.

Advertisements