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 the 'a elements' are set to width: auto; to accommodate their text. Without an explicit width, I'm not able to center align them. I have a container div and a child div that wraps around my 'a elements'.

Any thoughts? Thanks Mike

Answer 1

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

Answer 2

<div style="width: auto; margin-left: auto; margin-right: auto">
 div content
</div>

will align center on the page

Answer 3

You need to set margin: 0 auto; on the outer container div, add text-align: center; on the inner div; and use an unordered list to build your menu in the first place.

Answer 4

Hi, the div element will take all the width space of the container element if it isn't set a width value.

So if you want to center a div you must set a width...

A solution to your problem (if I have understand it) can be:

<div style="text-align:center;"><span>[... yours content ...]</span></div>

where your div has became a span and a new div puts the span in the center. Hope this can help you! Bye, Alberto

Answer 5

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 6

If you need it centered and dynamically shrinking/expanding to accommodate the content without knowing the width, then your only option really is using a table. It is the only elastic element in HTML repertoire.

<table style="margin-left:auto;margin-right:auto;">
    <tr>
        <td>
            Whatever...
        </td>
    </tr>
</table>

P.S. You can have a div to shrink dynamically as well by setting the float property to float:left or float:right. So it will stick to the left or the right, but you can't have it centered this way.

Answer 7

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 8

here a nice workaround for centering a div with no width:

http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/