Question

我正在使用Zurb Foundation和Sass Compass，但这可能会对css中的任何问题造成影响。

所以，我有这样的代码

<div class="row">
    <div class="small-6 column">...</div>
    <div class="small-6 column">...</div>
</div>

列具有不同高度的内容，取决于我想要放入多少文本和图像。该行没有明确的高度，由最高列的高度决定。现在最高的列将按原样显示，但另一个更短，我希望它的内容垂直居中。我一直在寻找这个，我尝试过使用display：table和relative positioning，但是没有一个能提供我需要的东西。

Answer 1

将div中的垂直对齐文本换成与其父级相同的高度并显示：table-cell it（将其父级显示为表格后）：

HTML

    <div class="row">
        <div class="small-6 column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et iaculis justo. Mauris bibendum convallis est, vel blandit quam tempor aliquet. Cras euismod nibh et nisl congue, eget tincidunt mauris consectetur. Donec eu risus lectus. Integer at ipsum sed turpis fringilla adipiscing vitae vel enim.</div>
        <div class="small-6 column"><div class="v_align">Some text</div></div>
        <div class="clear"></div>
    </div>
<div style="width:200px; height:100px; background:#0f0; color:#fff;">dfbvd bdfhgf hfg hghf gfdh hfgghfd hgf</div>

CSS

.row{
    width:300px;
    height:auto;    
}
.clear{clear:both;}

.column:first-child{
    color:#f00;
    background:#ccc;
}
.column:nth-child(2){
    background:#999;
    color:#00f;
    display:table;
}
.column{
    width:150px;
    float:left;
}
.v_align{
    display:table-cell;
    vertical-align:middle;
}

JS

$(document).ready(function(){
    var rowHeight = $(".row").height();
    console.log(rowHeight);
    $(".column").height(rowHeight);
    $(".v_align").height(rowHeight);
});

检查结果：http://jsfiddle.net/gespinha/h6aPf/6/

试图在zurb基础上垂直对齐两列

1 个答案: