5

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

4

2 回答 2

10

受此问题启发的解决方案是将buttonsSection 设置为flex 和center，并将button 设置为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;
}
于 2013-09-30T03:49:19.833 回答
2

只需添加align-items: stretch;到.buttonsSection

看到那个Working Fiddle

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

另外：使用时flex您必须注意供应商特定的前缀。在此处阅读更多信息

更新：

如果你使用我原来的建议，你也可以控制垂直对齐。

看看这个Working Fiddle

HTML：（相同）非常长的单词短短语

CSS：

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

.buttonsSection
{
    margin: 30px auto;
    display: table;
    border-spacing: 3px 0;
}


.button
{
    display: table-cell;
    vertical-align: middle;
    padding: 10px 15px;
    background-color: deepskyblue;
    color: white;
    text-align: center;
    max-width: 100px; /*Or any other width you want*/
}
于 2013-09-29T04:54:25.643 回答