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

Could you provide a sample of the HTML and CSS? – ylebre Jul 14 '09 at 07:38 — ylebre, Jul 14 '09 at 07:38

score 8 · Accepted Answer · answered Jul 14 '09 at 07:38

8

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

answered Jul 14 '09 at 07:38

Philippe Leybaert

168,566
31
210
223

I needed the child div to be relatively positioned w/ text-align: center. That solved the issue. Thanks! – Michael Swarts Jul 14 '09 at 08:03

score 3 · Answer 2 · answered Jul 14 '09 at 07:40

3

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

will align center on the page

answered Jul 14 '09 at 07:40

Sergei Kovalenko

1,402
12
17

2

Won't work in Safari without an explicit width and that's the browser I'm developing for. – Michael Swarts Jul 14 '09 at 07:59

score 2 · Answer 3 · answered Jul 14 '09 at 07:48

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

score 1 · Answer 4 · answered Jul 14 '09 at 08:18

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%;
}

score 0 · Answer 5 · answered Jul 14 '09 at 07:40

0

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.

answered Jul 14 '09 at 07:40

Williham Totland

28,471
6
52
68

score 0 · Answer 6 · answered Jul 14 '09 at 07:52

0

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.

answered Jul 14 '09 at 07:52

Kerrick

7,420
8
40
45

score 0 · Answer 7 · answered May 14 '10 at 01:41

0

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/

answered May 14 '10 at 01:41

Snowalker

309
1
7
16

score 0 · Answer 8 · answered Sep 03 '11 at 21:52

0

Here is also a good example for the situation: http://www.cssplay.co.uk/menus/centered.html

answered Sep 03 '11 at 21:52

HasanG

12,734
29
100
154

score -1 · Answer 9 · answered Jul 14 '09 at 08:04

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.

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

9 Answers9

Linked