Center a Page using CSS

CSS Logo

IE is giving a headache. All TechieDan wanted to do was to do a centering of the specific <div> in the web page.  That also brought me to think that this would actually be enough. Of course, if you are looking to do a centering vertically, then this is not the page you are looking for.

#page {
width: 800px;
margin: auto;
}

Surprisingly most of my developments and testing were done on Mozilla’s very own Firefox. After finishing the testing and procedures it was time to put it online to the World Wide Web. Little did TechieDan know, something was practically wrong when I have comments saying that the web page looks out of place and not in order?

This baffled TechieDan for some time until he tried using Internet Explorer to view the desired page. It was freaking out of place. Looks like some modifications were needed. It seems that IE does not really render the CSS given properly and needed some IE hack to help resolve this CSS issue.

Here is how to resolve the centering of a page or a div or anything you wanted which also would display properly in Internet Explorer.
Add this to your CSS.

body {
text-align: center;
}

It seems that IE has very weird way of solving this issue. Of course, by doing so in the body, everything else would also be centered. This is where you would only want the page to be centered but not the text or the elements in it.

#page {
width: 800px;
margin: auto;
text-align: left; //add this part too
}

From the desired element, put text-align: left; and it now should work very well. EGADS!!!! It has been awhile since a new post.

Leave a Reply