Centering horizontally with CSS

Try to center a web page like wordpress blog with css.


add this to you main container inside <body>

usually a <form> with this css properties.


  margin-left : auto ;

  margin-right : auto ;

  width : 700px ;

  height : 100% ;

  text-align : left;


width means the width of the content you want to show.

text-align : left I am going to explain it.

with this setting you can see the aligning is working in FF.


But IE6 will fail because it ignores margin-left and margin-right.

We need to get around this by adding this CSS property.

text-align: center;

This will going to cause you trouble since all the things inside <body> is

now centered! That’s why we set text-align : left previously.


I play this with Icefaces and Tomcat.

Your page should look alright now.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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