It’s so simple. You want to use UL elements for your menus. You want to style them with CSS. You want all the LI items centered.

Until now I’ve been using “float: left;”, which then leaves you to manually center the whole UL with specific margins. I’ve developed a simple CMS system which generates all the menus with LI entries, and this obviously poses a big problem with template design. I’d mostly ignored the issue until my latest client, who wants the CMS and lots of centered menus.

I had a quick look online, and most of the sites out there suggest this feature is some kind of black magic, requiring the sacrifice of some poor capra family mammal. Obviously, any simple solution would require decades of tweaking to work in Internet Explorer 6 (from this point forward to be known as “The I Hate Microsoft Browser”).

Nope. In the inimitable and immortal words of “The Meerkat”: Simples.

Here’s whatcha do:

Step 1: It puts the “text-align: center;” in the UL.

Step 2: It puts the “display: inline;” in the LI.

Step 3: It doesn’t put the float in either.

(Don’t worry, this doesn’t involve Buffalo Bill or ointment)

This appears to even work in IE6. (Yes, I know. Shocking isn’t it?)