Centering horizontally with CSS

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

center01

add this to you main container inside <body>

usually a <form> with this css properties.

.maxiForm{

  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.

center02

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

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

body
{
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.

center03

I play this with Icefaces and Tomcat.

Your page should look alright now.

Advertisements

Leave a Reply

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

WordPress.com Logo

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