Wednesday, May 6, 2009

Center a page horizontally using CSS

The following is an example of how to center a page without using the 'center' tag and using CSS.
Create a DIV tag and give it an id 'container'. Within this DIV, you can create your content or place whatever you like. This DIV container will contain all the elements that you would like to have in a centered block of the page, note: not the center of the page but a block that is centered on the page.

Then put the piece of code in your style section or file:


#container{
width:500px;
margin: auto; /*This makes the trick*/
}


The trick is simple, the width in combination with margin: auto; makes the container block be centered.

That is all!

Follow the link to see it in action.

0 comments:

Post a Comment

Thanks for your comment.