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

About tehwalrus

Lib Dem, Software Developer, General Geek. View all posts by tehwalrus

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: