Centering a floated menu?

[Crip]

centering a floated menu, I get ask this a lot but never knew how so , I did some research and found this at CSS Play

Revisiting this to show an easier method that is cross browser friendly. Thanks to Tristan Brotherton for the idea.

For most single level menus this method will work in all tahe major browsers and doesn't use hack, inline-blocks or display table/table-cell.

All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden.

The <ul> tag is then styled with a relative position and floated left with a left position of 50%.

Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%.

...and that as they say is all that is needed.

I tried this and it really does center your menu if it's a floated menu..

Just another tip from Crip~

[bloc]

Yes, tried using it, but sadly it has a side-effect: if the menu is longer than 70-80% of the window width, it will add a scrollbar at the bottom in FF and Opera when you shrink the window. One can hide that by using overflow: hidden but then the dropmenu is also hidden!

So best at fixed-width pages with a menu less than 80% of that width again.

[Crip]

The one i tried it on was 950px; but it did work FF3 only is all I checked it with.

[Xarcell]

I've tried this as well, only works best on fixed widths. It also depends on the width of the menu itself. It was never centered "exactly" in the center for me.