我如何居中导航栏？

Question

我的导航栏中有一个脚本：

<style type="text/css">
 /* Navigation Bar */
 #nav_bar {
     display:inline-block;
     height:50px;
 }
 #nav_bar ul {
     display:inline-block;
     list-style-type: none;
     border: 1px solid red;
     width: 565px;
     height: 100%;
     text-align: center;
     padding: 0;
     margin: 0;
 }
 #nav_bar li {
     display:inline;
     height:100%;
     padding: 0;
     margin: 0;
 }
 #nav_bar a:hover {
     background-color: #000000;
 }
 #nav_bar a {
     display:inline-block;
     height: 100%;
     color:white;
     text-decoration:none;
     line-height: 50px;
     padding: 0 1em 0 1em;
     background-color: #900000;
 }
</style>
</font>

我在尝试使其显示在页面中心时遇到麻烦，该怎么办？ 我研究了“ display：inline-block;” 和“位置：相对”，并且找不到能使我的导航栏的html部分工作的代码如下（关于您的评论），希望对您有所帮助！ :)

<div id="nav_bar">
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Forums</a> </li>
                <li> <a href="#">Shipping Info</a> </li>
                <li> <a href="#">Contact us</a> </li>
                <li> <a href="#">About us</a> </li>
            </ul>
        </div>

Answer 1

为其设置宽度和自动边距，并确保其为块级元素。

默认情况下，“ div”是块级元素，因此您可以删除此规则。

您必须设置宽度或菜单，然后将其扩展到其容器的宽度。

#nav_bar {
     display:block;
     height:50px;
     margin: 0 auto;
     width: 567px; /* or whatever you require */
 }

示例： http ： //jsfiddle.net/29FRa/

Answer 2

 #nav_bar {
   height:50px;
   width:800px;
   margin:0 auto;
 }

HTML：

<html>
 <body>
  <div id="#nav_bar"></div>
 </body>
</html>

Answer 3

使用text-align: center; 在您的#nav_bar并确保它是一个块级元素。

http://jsfiddle.net/TKMeU/

Answer 4

共有六种方法：１，边缘和宽度达到水平居中

#nav_bar {
     height:50px;
 }
 #nav_bar ul {
     list-style-type: none;
     border: 1px solid red;
     width: 565px;
     height: 100%;
     text-align: center;
     padding: 0;
     margin-left: auto;
    margin-right: auto;
 }

请观看演示。 2，使用内联块，如下所示：

#nav_bar {
     height:50px;
     text-align: center;
 }
 #nav_bar ul {
     list-style-type: none;
     display: inline-block;
     border: 1px solid red;
     width: 565px;
     height: 100%;
     text-align: center;
     padding: 0;
    text-align: center;
    font-size: 0;
    letter-spacing: -4px;
    word-spacing: -4px;
 }
 #nav_bar li {
    margin: 0 5px;
   display: inline-block;
  *display: inline;
  zoom:1;
  letter-spacing: normal;  
  word-spacing: normal;
  font-size: 12px;
 }

请观看演示。

3，使用浮子，像这样：

#nav_bar {
     float: left;
     width: 100%;
     overflow: hidden;
     position: relative;
 }
 #nav_bar ul {
     list-style-type: none;
     width: 565px;
      height: 50px;
     height: 100%;
     padding: 0;
     clear: left;
      float: left;
      position: relative;
      left: 50%;/*整个分页向右边移动宽度的50%*/
      text-align: center;
 }
 #nav_bar li {
     margin: 0 5px;
     display: block;
     height: 50px;
     float: left;
     position: relative;
     right: 50%;/*将每个分页项向左边移动宽度的50%*/
 }
 #nav_bar a:hover {
     background-color: #000000;
 }
 #nav_bar a {
     display:block;
     height: 100%;
     color:white;
     text-decoration:none;
     line-height: 50px;
     padding: 0 1em 0 1em;
     background-color: #900000;
 }

请观看演示。

其他方法，您可以单击此处。

我如何居中导航栏？

问题描述

4 个解决方案

解决方案1
1 已采纳 2013-06-12 10:33:42

解决方案2
0 2013-06-12 10:34:08

解决方案3
0 2013-06-12 10:37:29

解决方案4
0 2013-06-12 10:54:55

我如何居中导航栏？

问题描述

4 个解决方案

解决方案1 1 已采纳 2013-06-12 10:33:42

解决方案2 0 2013-06-12 10:34:08

解决方案3 0 2013-06-12 10:37:29

解决方案4 0 2013-06-12 10:54:55

解决方案1
1 已采纳 2013-06-12 10:33:42

解决方案2
0 2013-06-12 10:34:08

解决方案3
0 2013-06-12 10:37:29

解决方案4
0 2013-06-12 10:54:55