在zurb基础中的列中间对齐文本

Question

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

<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>

徽标可以具有不同的尺寸，如上面的示例所示。

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

Answer 1

你可以这样做。

CSS

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

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

添加了一个类mainCnt，row这样它就不会影响其他任何地方。