Align text in the middle of a column in zurb base

Question

I have an HTML structure where I need to place the logo in one column and the Title in another column.

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

The logo may be of different sizes, as shown in the example above.

I want to align the title. Here is an example script http://jsfiddle.net/57fBK/15/

Answer 1

You can do it like this .

CSS

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

You can delete !importantby providing a complete CSS hierarchy.

A class has been added mainCntto row, so it will not affect anywhere.

Answer 2

Demo

, . \

100px, 100px;

.div1{
line-height:100px;    
}

div2

.div2{
line-height:69px;
}

, ,

text-align:center;