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