CSS - 垂直对齐内格

Question

像我有以下代码：

<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*/ 
} 

我所想要做的是垂直对齐的图像中的同事中间50格。描述将全部是不同的长度，因此高度每次都会改变，所以对齐将不得不垂直居中。

有没有一个跨浏览器的方式，我可以做到这一点？

Answer 1

要将列并排显示并居中放置图像，可以在容器上使用display: table-row，在每列上使用display: table-cell。然后，您可以将宽度更改为50%并删除2%保证金。然后为图像居中，在包含列上使用vertical-align: middle。另外，将width:100%; height:auto;添加到图像中以使其适合列。

DEMO