How to Center a Website - Article / Learn By Doing

// Articles / How to Center a Website

Posted The: 12/07/2008 - AT: 13:58

There are a few methods to center a website, the ones covered in this article are all based on CSS, two methods are covered to make sure it works in most browsers.

Internet Explore

Ealier versions of Internet Explore requires the text-align: center; property applied to the containing element of the elements you wish to center, that would usually be the body of the page, see the example below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>How to Center a Website</title>
    <style type="text/css">
     body {
      text-align: center;
     }
     #Basement {
      width: 800px;
     }
    </style>
  </head>

  <body>
   <div id="Basement">
    <h1>How to Center a Website</h1>
    <p>My first Website.</p>
   </div>
  </body>

</html>

Of course that would center all the text, thats why we apply text-align: left; on the Basement, leaving us with the below.

body {
  text-align: center;
}
#Basement {
  width: 800px;
  text-align: left;
}

Other Browsers

The other other popular browsers accepts the margin property, with its left and right value set to auto, this can be done in two ways. By margin-left: auto;margin-right: auto; or By margin: 0 auto; we are going to use the last option in this article.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>How to Center a Website</title>
    <style type="text/css">
     body {
      text-align: center;
     }
     #Basement {
      width: 800px;
      text-align: left;
      margin: 0 auto;
     }
    </style>
  </head>

  <body>
   <div id="Basement">
    <h1>How to Center a Website</h1>
    <p>My first Website.</p>
   </div>
  </body>

</html>

Note. For the centering to have effect in all browsers, i retained the IE specific code. Also note that it may only be ealier versions which need this fix.