css - 列表未水平对齐/居中

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 子元素是内联，它们将在父 block 的宽度内居中，在您的例子中，这也是页面的宽度。

如果您需要添加垂直填充等，将 display: inline-block 应用于 li 元素，您可能会获得更好的控制。

最后，您不需要 !important 声明。