css - 使用表格方法垂直对齐？

Question

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

JSFiddle

<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 列的高度有关。我怎样才能让它拉伸(stretch)到它父级的高度？

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

Answer 1

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

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