Centering your web page

One of the most common questions posted on help board for developing a web site is how to center the content of your page. In HTML, the default alignment is left, so unless you set the rules for overriding the default, you page will stay left.

Fortunately, it is very easy.

First lets open a new page, and you should see this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

In between the head tags, type the following:

<style type=”text/css”>

</style>

So now your new page looks like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<style type=”text/css”></style
</head>

<body>
</body>
</html>

So we are going to create a new <div> and call it container. So we now enter this code and insert some sample content so the div will appear. This line of code will go in between the body tags:

<div id=”container”>Sample content goes here</div>

One last item and you will be ready to give it a test run. In between the script tags that you have already inserted into the head, enter the follow code:

#container {
width:900px;
margin:0px auto;
border:#cccccc 1px solid;
}

The code you have just entered is your Cascading Style Sheet, or CSS rules. We have told the browser that there is a <div> called container, it is 900 pixels wide, and the margins are set to 0 and auto, which is the centering rule. We have also added a border, this was done so it was easier for you to see.

So now your code page should look like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>

#container {
width:900px;
margin:0px auto;
border:#cccccc 1px solid;
}

</style>
</head>

<body>
<div id=”container”>Sample content goes here</div>
</body>
</html>

And your page will look like this(Click Here)

A few points of explanation. The hash mark, # , is used in CSS to give an ID to an element, in this case a division tag <div>. You can also create CSS rules with class rules. All you would need to do with that is to replace the hash mark #, with a period . , and you have a class rule. One of the main differences is that with an ID, there can only be one per page, with a class rule, there can be as many as you want.

For you to center an element, you must declare a width and set the margins to 0 and auto. The width can also be a percentage as opposed to a fixed width like in the example. It is not a bad idea for you to change some of the rules around to see what the result is.

If you notice, the <div> is centered, but the text is not. If you want to center your text, you would add another rule to your container set of rules like this:test-align:center;

And your text will then be justified center.

I hope you found this helpful, there is more information on the next page about division tags and faux columns.