在导航菜单上居中页面链接答案

【问题标题】：Centering Page Links on Nav Menu在导航菜单上居中页面链接
【发布时间】：2013-11-28 06:11:03
【问题描述】：

我想要一个全宽导航菜单，页面其余部分的宽度为 960 像素。

导航菜单上的链接需要在 960px 宽度的正文上方居中。

以下代码将导航菜单与左侧对齐。我需要包括什么才能使导航链接居中？

HTML

<div class="nav">
   <ul>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
   </ul>
</div>
<div class="wrapper">
   <div class="main">
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
   </div>
</div>

CSS

.wrapper {
    background-color: red;
    width: 960px;
    margin: 0 auto;
}

.nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
}

.nav ul {
    list-style: none;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

.nav li {
    float: left;
}

.nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

.nav li:first-child a {
    border-left: 1px solid #ccc;
}

.nav li a:hover {
    color: #c00;
    background-color: #fff;
}

【问题讨论】：

说真的！！..我同意
已编辑以包含 HTML。很抱歉在最初的帖子中错过了它。
如果我没听错的话，您想将导航置于 960 像素宽的内容区域上方吗？如果是这样，请尝试@tokyodrift 的想法或看看这个小提琴：jsfiddle.net/Moonbird_IT/7X3Lb
谢谢。对，那是正确的。我已经尝试过 tokyodrift 的想法，而且效果很好。

标签： html css nav

【解决方案1】：

.nav ul {
    list-style: none; 
    width: 960px;
    margin: 0 auto;
    padding: 0; 
    text-align: center;
}

.nav li {
    display: inline-block;
}

【讨论】：

感谢您的帮助。您的建议非常有效。

【解决方案2】：

如果您希望链接显示在中心，则不应“浮动”链接。相反，请尝试对导航链接项目（nav li）使用“display:inline-block”并添加“text-align:center " 到列表本身（导航）

【讨论】：

【解决方案3】：

试试

.nav { text-align: center; }

【讨论】：

【解决方案4】：

试试这个：

链接：http://jsfiddle.net/CdkXG/2/

CSS：

.wrapper { 
   clear: both;
}

【讨论】：