flexbox子行中的行高或垂直对齐

时间:2015-03-03 10:16:55

标签: css flexbox

最小工作示例:http://jsfiddle.net/3qxfknd7/

您可以看到AB都在其各自的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;
}

1 个答案:

答案 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>