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

我用一个链接和一些CSS创建了几个简单的按钮，给它一个背景，我正试图把它放在我的页面中心。但是，由于其中一个按钮中的文本比另一个按钮长，因此按钮的大小不同，为了保持一致性，我希望它们的宽度相同

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

<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;
}

.按钮{
填充：10px 15px；
背景颜色：深蓝；
颜色：白色；
}
.按钮部分{
文本对齐：居中；
边缘顶部：30px；
边缘底部：30px；
}
.按钮a部分{
保证金：3倍；
}

JSFiddle：

回答

---

虽然下面的两个答案都是有效的，但我正在将答案更新为使用Flexbox，包括将在不久的将来发布的IE11。Flexbox似乎为复杂布局提供了一个更好的解决方案，这种布局比浮动项等替代品所需的工作量要小。

使用固定宽度，按钮上带有

内联块


使用
inline block
在元素之间提供了一点边距（由HTML中的空白造成），因此我从CSS中删除了marin，但您可以将其放回去。
在按钮上使用固定宽度的
inline block


使用
内联块
在元素之间提供了一点空白（由HTML中的空白引起），因此我从CSS中删除了marin，但您可以将其放回原处。
使用轻松完成：

.button {
    padding: 10px 15px;
    width: 150px; /* Fixed width links */
    background-color:deepskyblue;
    color: white;
    margin: 3px;
}

.callToAction {
    margin: 30px 0;
    display: flex; /* Magic! */
    justify-content: center; /* Centering magic! */
}

使用轻松完成：

.button {
    padding: 10px 15px;
    width: 150px; /* Fixed width links */
    background-color:deepskyblue;
    color: white;
    margin: 3px;
}

.callToAction {
    margin: 30px 0;
    display: flex; /* Magic! */
    justify-content: center; /* Centering magic! */
}

在我看来是居中的，你哪里有问题？按钮宽度不匹配。我可以通过浮动它们来获得匹配的宽度，但是它们没有居中。我希望它们都居中且宽度相同。添加了一个答案，请查看。在我看来，它们居中，哪里有问题？按钮宽度不匹配。我可以通过浮动它们来获得匹配的宽度，但是它们没有居中。我希望它们都居中且宽度相同。添加一个答案，请查看。
.button 
 {
     width: 150px; /* Your custome size */
     background-color:deepskyblue;
     color: white;
     margin: 3px;
     padding: 10px 15px;
 }

Section a
 {
    width: 150px; /* for your all buttons */
 }