Monday, May 4, 2009

[CSS] Center DIV within DIV

This is one of those that'll give you nightmares.

You have a wrapper div and an inner DIV:
<div id="wrapper">
<div id="inner">
<!-- your rubbish here -->
</div>
</div>

Css styling below will do the trick - text-align: center will work on IE but won't work on other browsers (css compliant) which require margin: 0 auto:
/* for IE */
div#wrapper {
text-align: center;
}

div#inner {
margin: 0 auto; /* this centers the DIV */
width: 30%; /* whatever */
}

alternatively you could set left and right margin separately.

3 comments:

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

Anonymous said...

text-align:center doesn't even work in IE. I just tried it with IE8.

Anonymous said...

This helped me, thanks.