Vertical align middle inside div columns

Question

Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?

I've been banging my head for days over this and tried everything I could possibly think of.

This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}

.row {
    width: 100%;
    height: 100%;
    display:table-cell;
}

.col-left, .col-right {
    float: left;
    width: 50%;
    height: 100%;
}

/*--this should be vertically centred--*/

.content {
}

HTML

<section>

        <div class="row">

            <div class="col-left">
                <div class="content">
                    <h1>SOME TEXT</h1>
                </div>
            </div>

            <div class="col-right">
                <div class="content">
                    <img src="SOME IMAGE URL">
                </div>
            </div>

        </div>

</section>

JSFiddle

Answer 1

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

Demo