html - Flexbox - 垂直居中和匹配大小

Question

我有两个按钮并排使用 flex，它们的内容垂直居中，到目前为止效果很好。但是，当我的网站在移动页面上查看时(使用响应式设计来缩放页面)，第二个按钮(其中文本较少)的大小与其配套按钮不同。

因此，目标是垂直对齐按钮上的文本，并使两个按钮的大小始终相互匹配。

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

.button {
    padding: 20px 10px;
    width: 150px;
    background-color: deepskyblue;
    color: white;  
    margin: 3px;
   text-align: center;
}

.buttonsSection {
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body
{
    width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
    margin: 0 auto;
}

JSFiddle:http://jsfiddle.net/Dragonseer/WmZPg/如果问题不是很明显，请尝试减小“结果”窗口的宽度。

Answer 1

受 this question 启发的解决方案，是将 buttonsSection 设置为 flex 和 center，并将按钮设置为 flex、column 和 center。

在这里查看 fiddle :http://jsfiddle.net/Dragonseer/Nbknc/

.button {
    ...

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.buttonsSection {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}