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

Question

下面是我的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 的新手，所以我在将导航栏置于页面中心时遇到了一些麻烦。我所说的中心是指实际列表项在页面中居中，而不是像现在这样在左侧。非常感谢任何帮助!

Answer 1

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

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

jsFiddle