做橫向菜單及其項目中心

Question

我是菜單上的工作，我想保持它在中心像

，但目前它的那樣。我嘗試了很多CSS技巧，但沒有任何東西讓它集中在我想要的位置，所以任何人都可以幫助我，我會非常感謝你提前那種好感。

這裏是我的html

<div class="nav-menu"> 
      <ul> 
       <li><a href="">All</a></li> 
       <li><a href="">Animals</a></li> 
       <li><a href="">Funny</a></li> 
       <li><a href="">Gifs</a></li> 
       <li><a href="">Mems</a></li> 
       <li><a href="">TV</a></li> 
       <li><a href="">Social Media</a></li> 
       <li><a href="">Text</a></li> 
       <li><a href="">Like A Boss</a></li> 
       <li><a href="">Fail</a></li> 
       <li><a href="">Demotivational</a></li> 
       <li><a href=""></a></li> 
       <li><a href="">WTF</a></li> 
       <li><a href="">Awesome</a></li> 
       <li><a href="">Videos</a></li> 

      </ul>  
     </div> 

這裏是我的CSS

.nav-menu{ 
display: table; 
width:570px; 
} 
.nav-menu ul{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
text-align:center; 
margin: auto; 
width: 570px; 
} 

.nav-menu ul li{ 
display:inline-block; 
float:left; 
margin-right:25px; 
margin-bottom:10px; 
} 

.nav-menu ul li a{ 

float:left; 
margin:0; 
text-decoration:none; 
color:#9e9e9e; 
font-size:11px; 
text-align: center; 
} 

.nav-menu ul li a:hover{ 
display:block; 
float:left; 
margin:0; 
text-decoration:underline; 
color:#b8c5b2; 
font-size:11px 
} 

Answer 1

星爺肯定，看到this fiddle。新的CSS：

.nav-menu { 
    width:570px; 
    text-align:center; 
    background:#000; 
} 
.nav-menu ul { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:11px; 
    margin: auto; 
    list-style:none; 
} 
.nav-menu ul li { 
    display:inline-block; 
    margin-right:25px; 
    margin-bottom:10px; 
} 
... 

我對你.nav-menu ul li刪除float:left，取消了對你的.nav-menu ul寬度和移動text-align:center您.nav-menu。

更新我也刪除了display:table，因爲我想你已經添加了這個作爲你的一個測試，但它根本不需要。