How to vertically align a image to the floated text

Question

I am developing a two column responsive layout. Where one column has an image and the other do have the text. I want to align to the image vertical:middle; where I tried several techinques and stackoverflow answer till i could able to achieve it. Here is my code follows

HTML

<div class="row">
    <div class="col">
        <img src="http://placekitten.com/g/200/300">
    </div>
    <div class="col">
         <h2>Quicker answers to your customer’s questions.</h2>
         <p>Potential customers visit your site to learn more about what you do and how it can help them. When they have a question, our web chat tool gives them a direct line to your customer support and expert knowled</p>
    </div>
</div>

STYLE

h2{
    margin:0;
}
.col{
    float:left;
    width: 50%;
    vertical-align: middle;
}

DEMO

Can any one help to fix this. Thanks in advance.

Answer 1

You could try display: inline-block;

h2 {
    margin:0;
}

.col {
    display: inline-block;
    width: 50%;
    vertical-align: middle;
    font-size: 13px;
}

.row {
    font-size: 0; // remove space between inline-block elements
}

An example: http://jsfiddle.net/y208tfc0/1/

Answer 2

You could display the row as table and col as table-cell?

css;

    .row {
       display: table;
    }
    .col {
       display: table-cell;
       vertical-align: middle;
    }

Answer 3

You have to use display: inline-block; property.

Live demo there : http://jsfiddle.net/y208tfc0/5/

h2{
    margin:0;
}
.row {
    display: inline-block;
}
.col{
    box-sizing: border-box;
    width: 45%;
    vertical-align: middle;
    display: inline-block;
}

Instead of putting .row {font-size: 0 } and breaking font-size rules, I choose to put .row display: inline-block.

Answer 4

You can do the following:

h2{
    margin:0;
}
.col{
    width: 50%;
    vertical-align: middle;
    display: table-cell;/*Add display table-cell*/
}

.row{
    display: table;/*Add display table*/
}

fiddle