Library code snippets

Centre Aligning a Block Element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

#content
{
width: 700px;
margin: 0 auto
}

You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen. Simple... well not quite - we've still got the pre-IE 6 versions on PC to worry about, as these browsers won't centre align the element with this CSS command. You'll have to change the CSS rules:

body {
text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

Comments

  1. 01 Jan 1999 at 00:00

    This thread is for discussions of Centre Aligning a Block Element.

Leave a comment

Sign in or Join us (it's free).

Trenton Moss This article was written by Trenton Moss. Trenton's crazy about web accessibility and usability - so crazy that he went and started his own web accessibility and usability consultancy to help make ...

Related discussion

Related podcasts

  • Top Web Design Mistakes

    Pete LePage is Product Manager of Internet Explorer Developer Division and he doesn’t want your web site to stink. Sharing from his talk given at TechEd 2008, Pete highlights 10 common web design mistakes and tells you how you can bypass the same blunders. Pete also tells us how future features o...

Want to stay in touch with what's going on? Follow us on twitter!