1

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

我创建了一个简化的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 本身成为 flex 容器，但这似乎有点混乱..

4

1 回答 1

5

你在这里没有太多选择。垂直对齐属性仅适用于内联或表格单元格元素。您实际上只是添加了一个额外的属性并改组了您已经拥有的两个。

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;
}
于 2013-06-06T13:55:09.357 回答