how to center align a div containing floats without fixed width

Question

I have a ul menu inside a wrapper div. each li element has float:left (this is a horizontal menu). I want to center the menu in my page container (around 1100px), but I don't know what the size of the menu will be so I can't use "margin:0 auto".

I tried many different things, but I just can't get this to work.

This is a menu in wordpress, so the markup of ul and wrapper div is generated by wordpress. would prefer not to mess with that...

Answer 1

You can define your container display:inline-block and align the text to the center of the container by setting the property text-align:center, like so:

CSS

.nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}

.nav {
    text-align:center;
}

Answer 2

It's better you can use display:inline-block property for this. like this:

body{
    text-align:center;
}
.parent{
    text-align:left;
    background:red;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
}

Check this http://jsfiddle.net/pJs6e/2/