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/ 如果问题不是很明显,请尝试减小Result窗口的宽度.

Answer 1

受此问题启发的解决方案是将buttonsSection设置为flex和center,并将按钮设置为flex,column和center.

请看这里的小提琴:http://jsfiddle.net/Dragonseer/Nbknc/

.button {
    ...

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

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