css - css显示：盒子对齐拉伸和居中同时

Question

所以我有一个弹性盒子，或者更准确地说只有一个盒子 ( display: box)，因为这是 Sass Compass 生成的。

我希望它：

像这样：

坏的弹性盒

问题是上面列表中的要求 2 和要求 3 发生冲突。我可以让内容垂直居中，box-align: center但要让背景拉伸，我必须使用box-align: stretch。

在上面的示例中，我正在使用

#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }

问题是我不能指定一个固定的高度，因为高度是由第三列（石灰）的内容决定的。

没有javascript有什么办法解决这个问题吗？嵌套的弹性盒（尝试但无法工作）？显示：如上表？

score 1 · Accepted Answer

如果您只是想获得三个等高的列，它们随内容增长并具有垂直对齐，我认为不需要 flex box css

如果你只是使用下面的结构

<div class="table">
    <div class="cell" id="cell1"></div>
    <div class="cell" id="cell2"></div>
    <div class="cell" id="cell3"></div>
</div>

您可以使用以下样式：

.table {display:table; width:100%;}
.cell {display:table-cell; vertical-align:middle; width:33.33%;}

1 回答 1