html - 按钮链接格式 - 居中和匹配宽度

Question

我创建了几个简单的按钮，使用链接和一些 CSS 为其提供背景，并试图将其置于我的页面中央。但是，因为其中一个按钮中的文本比另一个长，所以按钮的大小不同，为了保持一致性，我希望它们的宽度相同。

如何使这些按钮保持相同大小？尝试 float 它们并使用百分比宽度会导致它们不居中。相关标记如下。

<section class="buttonsSection">
    <a class="button" href="#">Very Long Sentence</a>
    <a class="button" href="#">Short Phrase</a>
</section>


.button {
    padding: 10px 15px;
    background-color: deepskyblue;
    color: white;
}

.buttonsSection{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.buttonsSection a {
    margin: 3px;
}

JSFiddle:http://jsfiddle.net/Dragonseer/eTvCp/11/

回答虽然下面的两个答案都是有效的，但我正在更新使用 Flexbox 的答案。 Most modern browsers have excellent support for it ，包括即将发布的IE11。 Flexbox 似乎为复杂布局提供了更好的解决方案，与它的替代方案(例如 float 元素)相比，它需要更少的努力。

Answer 1

在按钮上使用带有 inline-block 的固定宽度。

Working Fiddle

.button {
    padding: 10px 15px;
    background-color:deepskyblue;
    color: white;
    display: inline-block;
    width: 20%; /*or any other width that suites you best*/
}

.callToAction {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

使用 inline-block 在元素之间提供一点边距(由 HTML 中的空白引起)所以我从 CSS 中删除了 marin，但你可以把它放回去.