3

我正在将 Zurb Foundation 与 Sass Compass 一起使用，但这对于 css 中的任何内容都可能存在问题。

所以，我有这样的代码

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

这些列具有不同高度的内容，这取决于我要在其中放置多少文本和图像。该行没有明确的高度，由最高列的高度决定。现在最高的列将按原样显示，但另一列较短，我希望它的内容垂直居中。我环顾四周，并尝试使用 display: table 和相对定位，但它们都没有提供我需要的东西。

4

1 回答 1

2

将垂直对齐的文本包装在与其父级相同高度的 div 中，并 display:table-cell 它（在将其父级显示为表格之后）：

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/

于 2013-08-27T01:08:06.437 回答