How to center content in internet explorer

While centering content in firefox can be done easily, ie (both ie6 & ie7) can give you some problems.

The reason is - Internet explorer can’t understand the margin:auto css property.

To do the trick and let internet explorer center the div/content, we must assign text-align:center on the parent div/element.

Example:

A div with a paragraph

<div class="parent">
<div class="child">Some random text</div>
</div>

And the CSS

.parent{
background:#0ff;
padding:20px;
}
.child {
margin:auto;
background:#ddd;
width:250px;
}

Will give you this result:

Unfortunately, this (the div or any element you are going to use) won’t be centered. As mentioned above, we need to asign the text-align:center; CSS property on the parent div.

So, if we add text-align:center; to the parent div as seen here

.parent{
background:#0ff;
padding:20px;
text-align:center;
}
.child {
margin:auto;
background:#ddd;
width:250px;
}

We will have the paragraph/div centered accordingly.

Please note that the content inside the child element will be centered too, that is because the child inherits the text-align property from the parent element. Just add text-align:left; to the child and the floating inside the parent div will reset.

.parrent{
background:#0ff;
padding:20px;
text-align:center;
}
.child {
margin:auto;
background:#ddd;
width:250px;
text-align:left;
}

We will have the paragraph/div centered accordingly.

If you are trying to center the main div (the wrapper), the parent element will be the body itself.

example:

body{
text-align:center;
}
div#wrapper {
width:600px;
margin:auto;
text-align:left;
}