How do I center align the items in my menu?
css, html, html-lists, menu, nav
Solution
- 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
Problem
How do I center align the items WITHIN in my menu? (The `li`s) 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: ``` #nav { font-family: Century Gothic, Arial, Helvetica, sans-serif; font-size: 15px; color: #fff; margin-left:auto; margin-right:auto; background-color: #eee; padding: 5px; height: 38px; width: 913px; font-weight: bold; border-style:solid; border-width:4px; border-color: #000; } #nav ul { padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 170px; } #nav ul li { list-style-type: none; text-align: center; float: left; margin: 0px; } #nav ul li a { text-decoration: none; color: #000; text-align: center; display: block; padding: 10px; margin: 0px; } #nav ul li a:hover { color: #CD0000; } ``` ``` <div id="nav" align="center"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">TOUR</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">PRESS</a></li> <li><a href="#">PHILANTHROPY</a></li> <li><a href="#">JOBS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> ```