居中導航菜單

Question

我有一個菜單，它運行良好，但需要中心菜單選項。我一直試圖在這裏遵循其他的答案，但沒有運氣。

，你可以在這裏看到的代碼 http://codepen.io/anon/pen/avMwYO?editors=110

的HTML是

<nav id='menu'> 
    <ul> 
     <li class='#'> 
     <a href='/'> 
      Home 
     </a> 
     </li> 
     <li> 
     <a href='#'> 
     optionOne 
     </a> 
     </li> 
     <li> 
     <a href='#'> 
      OptionTwo 
     </a> 
     </li> 
    </ul> 
    </nav> 

的CSS是

#menu{ 
background: #f2f2f2; 
border-top:2px solid #eaeaea; 
border-bottom:2px solid #eaeaea; 
color: #444; 
height: 50px; 
z-index:9; 
width:1080px; 
margin:0 auto; 
} 
#menu ul,#menu li{ 
margin:0 auto; 
padding:0 0; 
list-style:none 
} 
#menu ul{ 
height:80px; 
width:1080px 
} 
#menu li 
{ 
float:left;display:inline;position:relative;font:bold 12px "Arial", sans- serif; text-transform:none;} 
#menu a{display: block; 
line-height: 50px; 
padding: 0 30px; 
text-decoration: none; 
color: #444; 
border-right:1px solid #ddd; 

} 

li.home a{background:none;} 

如果有人可以解釋我是如何能夠做到這一點，我將不勝感激

謝謝

Answer 1

從li中刪除浮標，使它們爲inline-block並將text-align:center添加到父項ul。

#menu ul { 
    height: 80px; 
    width: 1080px; 
    text-align: center; 
} 

#menu li { 
    display: inline-block; 
    position: relative; 
    font: bold 12px "Arial", sans-serif; 
    text-transform: none; 
} 

Codepen Demo

Answer 2

在這裏你去：

#menu{ 
background: #f2f2f2; 
border-top:2px solid #eaeaea; 
border-bottom:2px solid #eaeaea; 
color: #444; 
height: 50px; 
z-index:9; 
width:1080px; 
text-align:center; 
} 
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} 
#menu ul{height:80px;} 
#menu li 
{ 
display:inline-block;font:bold 12px "Arial", sans-serif; text-transform:none;} 
#menu a{display: block; 
line-height: 50px; 
padding: 0 30px; 
text-decoration: none; 
color: #444; 
border-right:1px solid #ddd; 

} 

li.home a{background:none;} 

改變你的CSS這一點。演示：http://codepen.io/anon/pen/bVZrGO?editors=110