align text in middle of a column in zurb foundation

Question

I am HTML structure where i need to place logo in one column & Title in other other 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>

Logo can be of different dimension as show in the example above.

I want to align the title. Here is a fiddle example 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 remove !important by giving complete CSS hierarchy.

Added a class mainCnt to row so it will not affect anywhere else.