Flexbox - 垂直居中和匹配大小 [英] Flexbox - Vertically Center and Match Size

问题描述

我有两个按钮，使用flex和彼此相邻，我有他们的内容垂直居中，这工作伟大到目前为止。但是，当我的网站在移动网页上观看时（使用自适应设计缩放网页），第二个按钮（其中的文字较少）与其随播广告的大小不同。

I have two buttons next to each other using flex and I have their contents vertically centered, which work great so far. However, when my site is viewed on mobile pages (using responsive design to scale the page), the second button, which has less text in it becomes a different size than it's companion.

所以，目标是垂直对齐我的按钮上的文本，以及让两个按钮总是匹配彼此的大小。

So, the goal is to vertically align the text on my buttons as well as to have the two buttons always match each others size.

<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/
如果问题不明显，请尝试减小结果窗口的宽度。

JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/ If the problem isn't obvious right away, try reducing the width of the Result window.

推荐答案

解决方案灵感来自这个问题，是将buttonsSection设置为flex和center，并将按钮设置为flex，column和center。

Solution inspired by this question, was to set the buttonsSection to flex and center, and setting the button to flex, column and center.

请参阅Fiddle here： http://jsfiddle.net/Dragonseer/Nbknc/

See Fiddle here: http://jsfiddle.net/Dragonseer/Nbknc/

.button {
    ...

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

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

这篇关于Flexbox - 垂直居中和匹配大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！