Centered horizontal menus with CSS

Post 55 of 262


I got an e-mail asking how to make a centered horizontal menu, using XHTML and CSS. It may sound easy, but it cause me a lot of headache before I learned how to do it. After trying a lot of “text-align:center” and “margin: 0 auto;” approaches that didn’t work as I wanted, I realized that the trick is to think outside the box when positioning the unsorted list I use for navigation menus.

Rather than just answering the e-mail question, I want to share a link to an excellent and very well illustrated guide on how to make centered horizontal menus. The guide is written by Matthew James Taylor, and it has a no-hacks approach that keeps the code clean and efficient. A few examples are provided that you can use and learn from. Check it out, and don’t miss the many other good posts in Matthew’s design blog.


This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.


Tom DavisonFebruary 8, 2012 at 16:03Reply

Love it, great post. Used Matthew’s website for stuff in the past. As per your approach would have gone down the margins and aligns and probably come unstuck!

Facundo GonzálezFebruary 9, 2012 at 03:14Reply

Thank you, Andreas (for publish it) and Matt (for the explanartion).

Christopher VandenbergFebruary 14, 2012 at 14:01Reply

Thanks for the link Andreas, very useful.

Peter DrinnanSeptember 22, 2012 at 15:24Reply

The example with the tab style is exactly what I was looking for. Thank Matthew.