Center a dynamic width box

Question

Pseudo HTML

<div>
 <ul>
  <li>Nav 1</li>
  <li>Nav 2</li>
 </ul>
</div>

I want this to look like

[DIV---------------[UL nav1 nav2]----------------------]

Instead I get

[DIV[UL nav1 nav2-----------padding-------------------]]

The li's are left floated. The ul has overflow: auto. How can I get the ul to be as wide as it needs to be, not as wide as it can be, so I center it with an auto margin?

Answer 1

Try:

div { text-align: center; }
ul { display: inline; }

You may also want to try adding:

li { display: inline; }

Answer 2

In that case set the height on the div AND li's but make them inline, like Mr cletus says.

Or give up and use a <table>, although that'll get the css police banging on your door at 3am.

In the old days, we just used <table> and <img> and didn't know it was wrong. Like smoking in the 1970s, or listening to Rick Astley in the 1980's. We all did it, and still do once in a while when we think nobody is running us through a validator.

Answer 3

Using display: inline-block with IE hack:

zoom: 1;
display: inline;