中心水平導航菜單

努力將瀏覽欄居中置於瀏覽器中間...嘗試了谷歌發現的一些東西，但目前還沒有運氣。似乎應該是這樣一件容易的事情，但它竟然是一個痛苦的脖子！中心水平導航菜單

繼承人的代碼。

<div id="nav"> 
      <ul> 
       <li class="home"><a href="index.php">Home</a></li> 
       <li class="detail"><a href="about.php">About</a></li> 
       <li class="work"><a href="work.php">Work</a></li> 
       <li class="contact"><a href="contact.php">Contact</a></li> 
      </ul> 
     </div> 

#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0; 
    border-bottom: 1px solid #ccc; } 
#nav ul { 
    display: inline-block; 
    list-style-type: none; 
} 
#nav li { 
    float: left; } 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 1px solid #ccc; } 
#nav li:first-child a { 
    border-left: 1px solid #ccc; } 
#nav li a:hover { 

color: #50B748; 

}

來源

2014-05-23 user3087394

請儘量不要使用花車，而應使用display:inline-block。

JSfiddle Demo

CSS

ul { 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    //width: 100%; /* not required */ 
    //float: left; /* not required */ 
    margin: 0 0 1em 0; 
    padding: 0;  
    border-bottom: 1px solid #ccc; } 

#nav ul { 
    width:100%; 
    display: block; 
    list-style-type: none; 
    text-align: center; /* add this */ 
} 
#nav li { 
    //float: left; /* remove */ 
    display: inline-block; /* add this */ 
} 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 1px solid #ccc; } 

#nav li:first-child a { 
    border-left: 1px solid #ccc; } 

#nav li a:hover {  
    color: #50B748; 
}

編輯 - 填充ul /保證金的增加復位

來源

2014-05-23 11:23:19

感謝，它仍然是輕微向右偏移，雖然，任何想法？ – user3087394

你必須重置'ul'上的填充 - http://jsfiddle.net/Paulie_D/9ELje/10/ –

ul上沒有填充？通過抵消，我會說它的權利約30px – user3087394

添加margin-top:50%;它

就像這樣：

#nav { 


    width: 100%; 
    float: left; 
margin-top:50%; 
    padding: 0; 
    border-bottom: 1px solid #ccc; } 
#nav ul { 
    display: inline-block; 
    list-style-type: none; 
} 
#nav li { 
    float: left; } 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 1px solid #ccc; } 
#nav li:first-child a { 
    border-left: 1px solid #ccc; } 
#nav li a:hover { 

color: #50B748; 

}

這是否解決您的問題？還是我不明白你的問題？

來源

2014-05-23 11:25:03

不......你不明白......不是垂直居中，水平居中。 –

只需加上text-align: center;即可。#nav風格。和復位UL預設保證金應該是這樣的

HTML

<div id="nav"> 
      <ul> 
       <li class="home"><a href="index.php">Home</a></li> 
       <li class="detail"><a href="about.php">About</a></li> 
       <li class="work"><a href="work.php">Work</a></li> 
       <li class="contact"><a href="contact.php">Contact</a></li> 
      </ul> 
     </div>

CSS

#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0; 
    border-bottom: 1px solid #ccc; } 
#nav ul { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0; 
} 
#nav li { 
    float: left; } 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 1px solid #ccc; } 
#nav li:first-child a { 
    border-left: 1px solid #ccc; } 
#nav li a:hover { 

color: #50B748; 

}

來源

2014-05-23 11:31:13

中心水平導航菜單

回答

相關問題