How can I center align a div without knowing the width?

Question

I\'ve looked this up and the outlook seems bleak. I\'m not interested in using a table. I have 6 or so \'a element\' inline-blocks that make up a menu. It\'s slick, except all t

Answer 1

My advice is this answer - however someone commented that it wouldn't work in IE6. Here's how to make this work:

<div id="container">
    <div id="centeredBlock">centered</div>
</div>

#container {
    text-align: center;
}

#centeredBlock {
    margin: 0 auto;
    text-align: left;
    width: 50%;
}

Answer 2

Without setting an explicit width, the <div> tag will automatically expand to 100% of the width of its parent. Therefore, setting margin: 0 auto; will make it center -- with 0px on both the left and right.

Answer 3

You could set the style of the a element to margin: 0 auto, but that doesn't work in IE6. In IE6, you should set the wrapper div to text-align: center, and (optionally) set the text-alignment for the a element back to text-align: left