如何使用CSS居中文本導航欄

Question

我的文本導航欄不斷向左拉，任何人都可以告訴我我的代碼是否在某處出錯？我試過內聯塊，並刪除浮動，但它仍然不工作！

#navigation ul { 
list-style: none; 
padding: 0; 
width:400px; 
margin:auto; 
display: inline-block;} 

#navigation li { 
margin: 1em 1em; 
font-family: Times New Roman, Times, Calibri, GillSans, sans-serif; 
font-style: italic; 
display: inline-block;} 

#navigation li a { 
text-decoration: none; 
display: inline-block; 
} 

#content { 
width: 960px; 
margin-top: 25px; 
text-align:center; 
} 

#footer { 
margin-top:30px; 
text-align: center; 
font-size: 0.9em; 
} 

#sub_navigation { 
color: #BBB; 
text-align:center; 
margin-bottom: 25px; 
height:55px; 
letter-spacing:5px; 
} 

我的HTML是：

<div id="navigation" class="span-24 last"> 
     <ul> 
<li><a href="about.html">About</a></li> 
<li><a href="editorial.html">Editorial</a></li> 
<li><a href="portraits.html">Portraits</a></li> 

Answer 1

只需卸下display:inline-block屬性ul到中心這樣的：併爲項目添加text-align

#navigation ul { 
    list-style: none; 
    padding: 0; 
    width:400px; 
    margin:auto; 
    /*display: inline-block;*/ ---> Remove this 
text-align: center; ----> Add this 
} 

演示http://jsfiddle.net/aYVAP/2/

Answer 2

刪除顯示：在--- inline-block的>

#navigation li a { 
text-decoration: none; 
**display: inline-block;** 
} 

粘貼：text-align:center;