html - 在 zurb foundation 的列中间对齐文本

Question

我是 HTML 结构，我需要在一列中放置 Logo ，在其他列中放置标题。

<div class="row">
    <div class="large-3 medium-3 small-12 columns ">
        <img src="http://placehold.it/100x100&text=[Logo 1]" />
    </div>
    <div class="large-9 medium-9 small-12 columns ">This is the Title</div>
</div>
<p></p>
<div class="row">
    <div class="large-3 medium-3 small-12 columns ">
        <img src="http://placehold.it/200x100&text=[Logo 2]" />
    </div>
    <div class="large-9 medium-9 small-12 columns ">This is the Title</div>
</div>

Logo 可以有不同的尺寸，如上例所示。

我想对齐标题。这是一个 fiddle 示例 http://jsfiddle.net/57fBK/15/

Answer 1

你可以像this那样做.

CSS

.mainCnt {
    display: table;
}
.mainCnt .columns {
    display: table-cell;
    vertical-align: middle;
    float: none !important
}

您可以通过提供完整的 CSS 层次结构来删除 !important。

添加了一个类 mainCnt 到 row 所以它不会影响其他任何地方。