居中对齐按钮(CSS 3)

Question

我希望使用css3将两个按钮居中对齐。到目前为止，我有这个代码。现在，按钮默认是左对齐的。如果有任何帮助就太好了。

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;在你想居中的元素的外面。如果不能，可以同时使用width和margin: X auto;