Centered horizontal menus with CSS

Post 55 of 262

Source: matthewjamestaylor.com

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.

Menu