如何居中对齐菜单中的项目？

Question

如何居中对齐菜单中的项目？（lis）我设法使菜单（ul）居中于我的网站页面内，但我无法使菜单中的实际项目居中（首页，关于等）。

您可以在此处编辑我的HTML / CSS：http : //jsfiddle.net/66reH/
要查看结果

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>

Answer 1

• 删除#navdiv 上的align属性
• 添加text-align: center;到#nav选择器CSS
• 删除选择器CSS 的margin-left属性ul
• 将'添加text-align: center;到ul选择器CSS
• 删除选择器CSS float: left;上的属性li
• 添加display: inline-block;到li选择器CSS

您那里没有居中菜单。您只需在CSS的UL左侧添加170px，使其看起来居中。但事实并非如此。

此处演示