最小工作示例: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;
}
答案 0 :(得分:5)
不确定这是否属于您的目标:
.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>