为什么我不能让导航栏在页面上居中？答案

【问题标题】：Why cant i get the nav bar to center on page?为什么我不能让导航栏在页面上居中？
【发布时间】：2013-02-20 07:27:23
【问题描述】：

下面是我的html

    <div id="wrap">


<ul class="navbar">
      <li><a href="">Home</a></li>
      <li><a href="">Franchises</a>
        <ul>
        <li><a href="">elroyz Xpress</a></li>
        <li><a href="">skye stickbeetles</a></li>
        <li><a href="">Juddamania</a></li>
        </ul>
      </li>
      <li><a href="">Fixtures</a>
        <ul>
        <li><a href="">Round 1</a></li>
        <li><a href="">Round 2</a></li>
        <li><a href="">Round 3</a></li>
        <li><a href="">Round 4</a></li>
        <li><a href="">Round 5</a></li>
        </ul>
      </li>
      <li><a href="">Free Agents</a>
        <ul>
        <li><a href="">Adelaide</a></li>
        <li><a href="">Brisbane</a></li>
        <li><a href="">Carlton</a></li>
        </ul>
      </li>
</ul>
 </div>

下面是我的 CSS

    #wrap {
    width:100%;
    height: 37px;
    margin: 0;
    z-index:99;
    position:relative;
    background-color:#F00;}

.navbar {
    height: 35px;
    padding:0;
    margin: 0;
    position:absolute;
    border-right: 1px solid #1c1c1c;
}

    .navbar li  {
            height: auto;
            width: 150px;  
            float: left;  
            text-align: center;  
            list-style: none;  
            font: normal bold 14px/1.2em Arial, Verdana, Helvetica;  
            padding: 0;
            margin: 0;
            background-color: #F00
                        }

.navbar a   {                           
        padding: 10px 0;
        border-left: 1px solid #1c1c1c;
        border-right: 1px solid #1c1c1c; 
        text-decoration: none;
        color: white;
        display: block;
        }

 .navbar li:hover, a:hover {background-color: #a4a4a4;} 

.navbar li ul   {
        display: none;
        height: auto;                                   
        margin: 0; 
        padding: 0;         
        }               

.navbar li:hover ul     {
                        display: block;
                        }

.navbar li ul li {background-color: #a4a4a4;}

.navbar li ul li a  {
        border-left: 1px solid #1c1c1c; 
        border-right: 1px solid #1c1c1c; 
        border-top: 1px solid #1c1c1c; 
        border-bottom: 1px solid #1c1c1c; 
        }

.navbar li ul li a:hover    {background-color: #1c1c1c;}

我只是 html 和 css 的新手，所以我很难让导航栏在页面中居中。中心我的意思是实际的列表项在页面中居中，而不是像现在这样在左侧。任何帮助都非常感谢！

【问题讨论】：

标签： html css

【解决方案1】：

你需要将width和margin auto添加到你的navbar我做了一点jsFiddle

.navbar {
    height: 35px;
    width:610px;
    margin:0 auto;
}

jsFiddle

【讨论】：

【解决方案2】：

您必须将换行的宽度设置为像这样以像素为单位的东西

#wrap {
width:750px; // Set it according to your need
margin: 0px auto;  // i also changed this
height: 37px;
z-index:99;
position:relative;
background-color:#F00;}

还有到0px auto的边距

这里是JSfiddle

【讨论】：

【解决方案3】：

.navbar {
    height: 35px;
    padding:0;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 100px;// change this to desired width
    border-right: 1px solid #1c1c1c;
}

【讨论】：

它是因为你给导航栏类一个绝对位置，在这种情况下你应该使用 top,left 参数来移动 div