user1850463 user1850463 - 1 year ago 78
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 Source
  • 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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download