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