css: centering nav on page automatically when new pages are added

jsfiddle: http://jsfiddle.net/tmjuv/

Basically, I want the nav开发者_运维百科 block to be centered on the page. If the number of pages were static, I could just add a width and do a margin:0 auto (example here); however, in this case, it will be for a theme so the nav will have to be centered no matter how many pages the user adds. Is this possible with only css?

---

Look at this: http://jsfiddle.net/tmjuv/10/

It uses display: table, and works without changing the structure of your html code.

I didn't look to see if this example runs in all browsers.

EDIT:

Look at this solution: http://jsfiddle.net/tmjuv/12/. It works with a transparent background-color of the ul and background-colors for the lis. You can try if this works in all browsern (unfortunatly I have only FF and IE9 on this pc ..)

---

you could do something like this: http://jsfiddle.net/meo/tmjuv/8/

It require the UL to be wrapped. If its not in your actual surce code, since you can't change it, you gonna need some JS to do it. I think there is no pure css solution to this. but it requires the browser to understand inline-block. Whats not the case of IE6.

---

If you set the <ul> to text-align: center and the <li>s to display: inline-block;, that should give you the effect you want.

• http://jsfiddle.net/pauldwaite/QJgT8/1/

Not entirely sure it’ll work in older versions of IE though — I think inline-block was only supported on block-level elements in IE from version 8.