居中对齐按钮（CSS 3）

Question

我希望使用CSS 3使两个按钮居中对齐。到目前为止，我已经有了这段代码。 现在，默认情况下按钮是左对齐的。 任何帮助都会很棒。

HTML：

<ul>
<li class="menubutton"><a href="about.html">About</a></li>
<li class="menubutton"><a href="staffing.html">Staff</a></li>
</ul>

CSS：

.menubutton{
        text-align: center;
        background-color: beige;
        height: 50px;
        width: 100px;
        border-radius: 5px;
        display: inline-block;
}

Answer 1

您应该具有这样的<ul> ：

<ul>
<li class="menubutton"><a href="about.html">About</a></li>
<li class="menubutton"><a href="staffing.html">Staff</a></li>
</ul>

和CSS：

ul{
text-align: center;
}

Answer 2

将按钮放入div并使用text-align：

<div id="container">
    <li class="menubutton"><a href="about.html">About</a></li>
    <li class="menubutton"><a href="staffing.html">Staff</a></li>
</div>

CSS：

#container {
    text-align:center;
}
.menubutton{
        text-align: center;
        background-color: beige;
        height: 50px;
        width: 100px;
        border-radius: 5px;
        display: inline-block;
}

在这里尝试

Answer 3

您肯定要把text-align：center; 在要居中元素的外部。 如果不能，请结合使用宽度和边距：X auto;