CSS trick: center horizontal menu

First time a came across this issue today, and then realised how common the issue was amongst front-end designers.

Issue: web designers tend to rely on cut and paste code when designing menus, without understanding fully what the actual CSS does.

If you google for "CSS horizontal menus", you'll find loads of valid examples.

e.g.: http://www.sovavsiti.cz/css/horizontal_menu.html

the trick is to use li {display: inline} in order to get the listed items aligned horizontally (li is by default defined as "block"). But if you then need to apply specific styles such as background, or padding (which you will probably need to make the menu look pretty), you are then stuck - display: inline prevents you from applying these types of style.

The recommendation from sovavsiti is to apply a float: left, instead of display: inline, which achieves the same effect (align menu items horizontally) while keeping the block property for display, which allows more styling options.

But this is where things start going wrong
The float: left property prevents you from using the align: center property, and you end up banging your head on the wall trying to work out how to modify the actuall css in order to center your menu => wrong approach.

The right approach (well, in my opinion any way) is to get back to the basics.
1) You cannot use float: left because it prevents you from centering your menu
2) You cannot use display: inline alone without loosing the ability to style your menu items with background images/colour, padding, etc ..

Solution: once you have described the issue properly, the solution is then straightforward: use span within the li to be able to apply the missing styling properties. Easy, isn't it?

An example is available at: strctlycss


Conclusion: it is often a matter of finding what the actual problem is. Once you understand exactly what your CSS does, and its limitations, the solution is then straightforward to find.