爲什麼不能讓導航欄居中顯示在頁面上？

下面是我的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等等具有麻煩的導航欄在頁面居中升技IM。由中心我的意思是實際列表中的項目中心不在左側，就像現在一樣。任何幫助非常感謝，謝謝！

來源

2013-02-20 elroyz

您需要添加width和margin自動到您的navbar我做了一點jsFiddle

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

jsFiddle

來源

2013-02-20 07:35:51 dinodsaurus

感謝您的幫助傢伙非常完美！ – elroyz 2013-02-20 09:34:25

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

來源

2013-02-20 07:31:40

它，因爲你給的導航欄類的絕對位置，在這種情況下，你應該使用上，左參數來移動DIV – 2013-02-20 07:32:57

你必須這樣

#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

來源

2013-02-20 07:32:17

爲什麼不能讓導航欄居中顯示在頁面上？

回答

相關問題