Question

我是HTML结构，我需要在一列中放置徽标＆amp;其他专栏中的标题。

<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可以具有不同的尺寸，如上例所示。

我想调整标题。这是一个小提琴示例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课程，因此不会影响其他任何地方。

Answer 2

Demo

如果您知道徽标的大小，那么您可以使用行高并在中间对齐文本.. \

由于第一个徽标的高度为100px，因此将相应标题的行高设置为100px;

.div1{
line-height:100px;    
}

同样适用于div2

.div2{
line-height:69px;
}

如果你想让文字水平对齐，只需添加

即可

text-align:center;

两个班级

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

2 个答案:

Demo