html - Center align buttons (CSS 3)

Question

I'm looking to center align two buttons using CSS 3. So far, I have this code. Right now, the buttons are left-aligning by default. Any help would be great.

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;