user1850463 user1850463 - 29 days ago 6
CSS Question

How do I center align the items in my menu?

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

HTML:

<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>


CSS:

#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;
}

Answer
  • 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

Comments