How do I center align the items in my menu?

Question

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 1

• 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