居中对齐按钮 (CSS 3)答案

【问题标题】：Center align buttons (CSS 3)居中对齐按钮 (CSS 3)
【发布时间】：2015-10-17 08:31:05
【问题描述】：

我希望使用 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;
}

【问题讨论】：

标签： html css button center-align

【解决方案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;
}

【讨论】：

我喜欢这个答案！如果要删除额外的空白，可以在 ul css 中添加“margin: auto”。
我很抱歉。我已经有了

【解决方案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;
}

试试here

【讨论】：

【解决方案3】：

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

【讨论】：