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

我想要做的是将图像垂直对齐在col-50 div的中间。描述的长度都不同，因此高度每次都会改变，因此对齐必须垂直居中。

我是否可以通过跨浏览器方式实现此目标？

Answer 1

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

DEMO

CSS - 垂直对齐div内的图像

1 个答案: