4

如何在我的菜单中居中对齐 WITHIN 中的项目？（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>

4

2 回答 2

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

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

在这里演示

于 2012-11-25T02:14:55.830 回答
0

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>

演示

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

将 div 居中

于 2012-11-25T02:23:33.937 回答