CSS - Vertically align image inside div

Question

I have the following code:

<h1>4 Channel DVR - High Res 960H WD1, (500GB HDD)</h1>
<div class="col-50 product-wrapper left">

<img class="product-image" src="http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/4-channel-dvr.jpg" alt="4-channel-dvr" width="522" height="283" class="alignnone size-full wp-image-398" />

</div>

<div class="col-50-end left"

Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here 

</div>

<div class="clear"></div>

CSS:

.col-50 {
    width: 49%;
    margin-right: 2%;
}

.col-50-end {
    width: 49%;
}
.product-wrapper {
     /*empty*/
}
.product-image {
    /*empty*/
}

What I am wanting to do is vertically align the image in the middle of the col-50 div. The descriptions will all be different lengths so the height will change each time and so the alignment would have to be centered vertically according.

Is there a cross-browser way I can achieve this?

Answer 1

To display the columns side by side and center the image, you can use display: table-row on a container and display: table-cell on each column. Then you can change the widths to 50%and remove the 2% margin. Then to center the image, use vertical-align: middle on the containing column. Also, add width:100%; height:auto; to the image to make it fit the column.

DEMO