How do I center align the items in my menu?

user1850463 picture user1850463 · Nov 25, 2012 · Viewed 16k times · Source

How do I center align the items WITHIN in my menu? (The lis) I managed to center the menu (ul) within the page of my website but I can't center the actual items in the menu (Home, About, etc.)

You can edit my HTML/CSS here: http://jsfiddle.net/66reH/
To see the results

CSS/HTML:

Answer

Scott picture Scott · Nov 25, 2012
  • remove the align property on the #nav div
  • Add text-align: center; to the #nav selector CSS
  • remove the margin-left property for the ul selector CSS
  • add 'text-align: center; to the ul selector CSS
  • remove the float: left; property on the li selector CSS
  • add display: inline-block; to the li selector CSS

You didn't have a centered menu there. You simply added 170px to the left of the UL in the CSS so it sort of looked centered. But it wasn't.

DEMO HERE