列表未對齊/水平居中

Question

我在將這些按鈕居中放置在頁面上時遇到問題。我只知道這是我錯過的愚蠢，但我無法弄清楚什麼。這裏的頁面：

<div id="page1"> 
    <ul id="choiceBtns"> 
     <li>All Time</li> 
     <li>Last 2 Weeks</li> 
     <li>Last Year</li> 
    </ul> 
</div> 

這裏是CSS：

#choiceBtns li{ 
    display:inline !important; 
    border:solid; 
    padding:3px; 
} 

#choiceBtns { 
    margin:10px; 
    margin-left: auto ; 
    margin-right: auto ; 
} 

Answer 1

開始通過修改CSS如下：

#choiceBtns { 
    margin:10px; 
    margin-left: auto ; 
    margin-right: auto ; 
    text-align: center; 
} 

由於您li子元素inline，他們將在中心父塊的寬度，在你的情況下，也是頁面的寬度。

如果您需要添加垂直填充等，將display: inline-block應用於li元素，您可能會獲得稍好的控制。

最後，您不需要!important聲明。