Question

我试图将内容垂直居中于列布局中的两个弹性框中。

我创建了一个简化的 Fiddle 来演示。

HTML：

<div id='container'>
    <div id= "top">
        some content!
    </div>
    <div id= "bottom">
        some content!
    </div>
</div>

CSS：

#container{
    display: -webkit-flex;
    width:100%;
    height:300px;
    -webkit-flex-direction: column;
    -webkit-justify-content: space-around;
    background-color: gray;
}
#container div{
    text-align:center;
    background-color:red;
    //-webkit-flex: 1; //uncomment to see 2nd option
    //vertical-align: middle; //doesn't work
}

我希望内部DIV垂直拉伸以填充剩余空间。我可以通过取消注释flex值来实现这一点，但是当我这样做时，内容与顶部对齐。我尝试了纵向对齐，但这没有用（我没想到它！）......

因为我的应用程序有一个动态高度的容器，我不能使用固定的边距或填充来排序这个问题。

有办法做到这一点吗？也许我必须让内部div自己成为容器，但这看起来有点混乱......

Answer 1

你在这里没有太多选择。 vertical-align属性仅适用于内联或表格单元格元素。你真的只是添加了一个额外的属性并且拖拽了你已经拥有的两个属性。

http://jsfiddle.net/bHNC9/1/

#container{
    display: -webkit-flex;
    width:100%;
    height:300px;
    -webkit-flex-direction: column;
    background-color: gray;
}
#container div{
    text-align:center;
    background-color:red;
    -webkit-flex: 1;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

在空间填充弹性框内垂直居中内容

1 个答案: