中心对齐水平导航栏

Question

我将水平导航栏与浏览器中心对齐时遇到了一些问题。 在我提出这个查询之前，我想表明我是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;
}

Answer 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;}

Answer 2

如果添加以下样式：

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

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

看到这个小提琴。

Answer 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标签

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

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

中心对齐水平导航栏

问题描述

3 个解决方案

解决方案1
2 已采纳 2011-11-15 00:15:32

解决方案2
1 2011-11-15 00:04:41

解决方案3
0 2016-07-31 21:42:47

中心对齐水平导航栏

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-11-15 00:15:32

解决方案2 1 2011-11-15 00:04:41

解决方案3 0 2016-07-31 21:42:47

解决方案1
2 已采纳 2011-11-15 00:15:32

解决方案2
1 2011-11-15 00:04:41

解决方案3
0 2016-07-31 21:42:47