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

use*_*463 4 html css menu html-lists nav

如何居中对齐菜单中的项目?(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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

Sco*_*ott 5

  • 删除#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,使其看起来居中。但事实并非如此。

此处演示