The Infinite Loop – Beginner's SEO, Beginner C# & JQuery Tutorials Problem. Problem Solved. Loop. – The life of a programmer

18Jun/091

Centering a Div in IE

Little quick tip. This is mentioned in my basic css layout tutorial, however, im making a seperate blog post, because it is important. If you have a div and you want it centered, you may do this with margin: 0 auto, applying auto margin to left and right. This doesnt really work in IE.

If you are trying to center your container or wrapper div, this is how you do it.

Problem: IE doesn't properly center a wrapper or container div.
Reason: IE actually uses text-align to center block level items as well as text.
Solution: The solution is to apply text-align: center to the body tag, and offset this in the wrapper div.

<div id="wrapper">

</div>

And the css:
body{text-align: center; /*centers in IE*/}

#wrapper{
text-align: left; /*offset the ie center*/
margin: 0 auto; /*centers in other browsers*/
}

Enjoy.