居中对齐水平导航栏答案

【问题标题】：Center Aligning A Horizontal Navigation Bar居中对齐水平导航栏
【发布时间】：2011-11-14 23:52:49
【问题描述】：

我在将水平导航栏与浏览器中心对齐时遇到了一点问题。现在，在我提出这个问题之前，我想表明我是 HTML 和 CSS 的新手，所以请耐心等待，这无疑是一个快速修复！

页眉和页脚是全宽的，在浏览器的中心有一个固定的内容部分。导航栏位于标题下方。目前，该条正在向左对齐，但它似乎不会在不变形的情况下移动。

HTML：

<body>
<div id="header">
  <div class="wrap">
    <img src="images/logo_header.png" alt="Image alt." />
  </div>
</div>
<div id="nav">
  <div class="wrap">
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
      <li><a href="#">Option 6</a></li>
    </ul>
  </div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>

和 CSS：

body {
  margin:0;
  padding:0;
  font-family:verdana;
}
.wrap {
  position:relative;
  margin:0 auto;
  width:960px;
}
#header {
  float:left;
  width:100%;
  background-color:#FFCC33;
}
#nav {
  float:left;
  background-color:#FFCC33;
  border-top:2px solid #000000;
}
#nav ul {
  list-style:none;
  display:inline;
  margin:0px;
  padding:0px;
}
#nav li {
  display:inline;
  line-height:1.8em;
}

【问题讨论】：

标签： css navigation html alignment

【解决方案1】：

试试这个：

<body>
<div id="header">
  <div class="wrap">
    <img src="images/logo_header.png" alt="Image alt." />
  </div>
</div>
<div class="container">
<div id="nav">
  <div class="wrap">
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
      <li><a href="#">Option 6</a></li>
    </ul>
  </div>
</div>
</div>

<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>


.container{width:980px;margin:0 auto;text-align:center;}
.nav{float:left; text-align:left;}

【讨论】：

【解决方案2】：

如果你添加一个样式：

#nav .wrap {text-align:center; }

这将使导航链接居中对齐。

见this fiddle。

【讨论】：

【解决方案3】：

尝试这样做对于 HTML

<nav class="computer">
    <div class="container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>
</nav>

对于 CSS：

nav{
    width: 100%;
    .container{
        width: 50vw;
        margin: 0 auto;
        ul{
          text-align: center;
          li{
            width: 10vw;
          }
        }
     }
 }

因为我有 5 个项目，所以我将 50 个 vw 用于容器，10 个 vw 用于每个项目。这使导航栏完全居中对齐。不要记得使用视口的元标记

<meta name="viewport" content="width=device-width, initial-scale=1"/>

注意：我在这里为 css 使用 LESS

【讨论】：