Question

如何在菜单中居中对齐项目？（li s）我设法将菜单（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

删除#nav div
将text-align: center;添加到#nav选择器CSS
删除margin-left选择器CSS

ul

将text-align: center;添加到ul选择器CSS
删除float: left;选择器CSS

li

将display: inline-block;添加到li选择器CSS

那里没有居中的菜单。您只需在CSS的左侧添加170px，这样就可以将看起来像居中。但事实并非如此。

DEMO HERE

Answer 2

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;
}
#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;
}
.outer {
    float: right;
    right: 50%;
    position: relative;
}
.inner {
    float: right;
    right: -50%;
    position: relative;
}
.clearboth {
    clear:both;
}

<div id="nav" align="center">
         
  <div class="outer">
    <ul class="inner">
      <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>
  <div class="clearboth"></div>
</div>

demo

阅读有关居中的更多信息：

Centering a div

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

2 个答案: