使用表格方法垂直对齐？

【问题标题】：Vertical align using table method?使用表格方法垂直对齐？
【发布时间】：2015-06-28 00:12:42
【问题描述】：

我正在尝试使用表格/表格单元方法进行垂直对齐。

<div class="row">
    <div class="small-6 columns valign">vertically align me</div>
    <div class="small-6 columns"><p>content</p>.....</div>
</div>

.row{
    display: table;
}

.valign{
    display: table-cell;
    vertical-align: middle;
    background: grey;
    height: 100%;
}

但它不起作用，我哪里出错了？我怀疑这与 valign 列的高度有关。我怎样才能让它伸展到它的父母的高度？

我还应该在我的实际代码中提到我的代码嵌套在页面中很深，所以它在文章和部分标签以及另一个 div 中。

【问题讨论】：

标签： css zurb-foundation zurb-foundation-5

【解决方案1】：

在某些浏览器上，CSS 属性 float 不适用于 display: table-cell，因此您应该将 float: none 设置为 table-cell 元素，以使它们像表格单元格一样工作

https://jsfiddle.net/zac926wL/5/

【讨论】：

详细说明 - 将 float 分配给 left 或 right 会将任何元素转换为 block-level，而不是其默认值或分配的 display 值。而且，因此 OP 了解 float 的注入位置，Foundation 在其 column 和 columns 类上执行此操作。