最小工作示例:http://jsfiddle.net/3qxfknd7/
您可以看到 A
和 B
在各自的 div 中水平居中,但不是垂直居中。高度是动态的,因此我无法将 line-height
设置为 font-size
,因为具有较大 font-size
的按钮必须确定 line-height
。除此之外,类 large
可能存在也可能不存在:我不能假设它存在!
我该怎么做?
<div class="button-group">
<div class="button"><span>A</span></div>
<div class="button"><span class="large">B</span></div>
</div>
.button-group {
display: flex;
flex-flow: row nowrap;
align-content: flex-start;
justify-content: flex-start;
}
.button {
flex: 1 0 auto;
text-align: center;
outline: 1px solid red;
}
.button span {
font-size: 20px;
}
.button span.large {
font-size: 40px;
}
最佳答案
不确定这是否是您所追求的:
.button-group {
display: flex;
flex-flow: row nowrap;
}
.button {
display:flex;
align-items: center;
flex: 1 0 auto;
align-content: center;
justify-content: center;
outline: 1px solid red;
}
.button span {
font-size: 20px;
}
.button span.large {
font-size: 40px;
}
<div class="button-group">
<div class="button"><span>A</span></div>
<div class="button"><span class="large">B</span></div>
</div>
关于css - flexbox 子项中的行高或垂直对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28829200/