I need some help on centering navigation. I'm developing a template in WordPress that uses the pages function to add new pages into a horizontal navigation bar (unordered list). I understand how to make it align left or right using floats, but what about centering it? What I would ultimately like to have is a nav that expands each button to take up whatever horizontal space is available within it's parent <div>. I also want it to shrink to accept more buttons as they are added through the WordPress admin without having to go back and adjust the padding. This is exactly how I used to use tables. Is there some way of replicating this without the use of tables? I've tried to pad the <li> elements with percentages rather than pixels but this doesn't seem to have any effect. Anyone have some advice or a site that I could look at that does something similar.

Would you be able to add

margin: 0 auto;

to your list? And wrap a div around with text-align center for IE?

Hope this helps. If this doesn't sove it try using display:inline for your li tags - that way no floats are used.

If you can set a width other than auto on your UL, then adding margin: 0 auto; will work. If the width of the UL is variable, then there's a few ways to center its content:

http://24ways.org/advent/centered-tabs-with-css

http://www.cssplay.co.uk/menus/centered2.html

Neither of them work in the latest IE7 though, although the 24ways method doesn't break as bad as the cssplay method