中心对齐水平导航栏

Question

I am having a slight problem aligning my Horizontal Navigation bar to the center of the browser. 我将水平导航栏与浏览器中心对齐时遇到了一些问题。 Now before I put forward this query, I want to indicate that I'm new to HTML and CSS so bear with me on what is undoubtedly a quick fix! 在我提出这个查询之前，我想表明我是HTML和CSS的新手，所以请耐心等待，这无疑是一个快速修复！

The header and footer are to be full width with a fixed content section in the center of the browser. 页眉和页脚是全宽的，在浏览器的中心有一个固定的内容部分。 The navigational bar is to sit underneath the header. 导航栏位于标题下方。 At present, the bar is aligning itself to the left but it won't seem to budge without losing its shape. 目前，杆正在左侧对齐，但在不失去形状的情况下似乎不会移动。

The HTML: 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>

and the CSS: 和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

try this: 试试这个：

<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

If you add a style of: 如果添加以下样式：

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

This will center align the nav links. 这将使导航链接居中对齐。

See this fiddle . 看到这个小提琴。

Answer 3

try doing this For HTML 尝试这样做对于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>

for css: 对于CSS：

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

as i had 5 items i used 50 vw for container and 10 vw for each items.. this align the navbar perfectly centered. 因为我有5个项目我使用50 vw容器和10 vw每个项目..这对齐导航栏完美居中。 dont remember to use the meta tag for viewport 不记得为视口使用meta标签

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

NOTE: i am using LESS here for css 注意：我在这里使用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