How to Center Align a Website or Html Element Without Align Tag

To position a website or a div tag or p tag in the center of the screen from Internet Explorer 4 and up including all modern browsers like Firefox, Opera, Netscape etc, we often use the align="center". Though this tag satisfies our aim and centers the element in the screen, but this tag is not recognized by W3 Validator as a valid XHTML content. Thats why if you are cautious enough about your website to be XHTML Validated, you can’t use it .



But websites positioned at the center of the screen always looks great and well-structured. The trick is to add some lines in your CSS. Just add text-align: center; to the body, this will make your website center aligned in Internet Explorer. Then add the usual margin: 0 auto; to the container selector which you want centered, this will make the element center aligned for all other browsers like Firefox, Opera, Mozilla, Netscape etc. Apply text-align: left; on the container to counter the center align for body. See the following example to make clear idea:

body {
text-align: center; /* Center align for IE */
}

.wrapper {
margin: 0 auto; /* Center align for Good browsers like Firefox, Opera, Netscape */
text-align: left;
width: 960px;
}
So now you can easily have center aligned website or elements, without violating any XHTML specification. Thus your website will look as cool as it is and you will also have the W3 Validated page Logo on your Website.