垂直对齐div元素中的图像？

Question

我有一个div元素，其高度我设置为em，其宽度我设置为百分比。其中包含一个图像。它的宽度为百分比（83％）。但是，如果我处于div元素开始变窄的分辨率，图像也会缩小，但不是占据整个div（应该如此），图像变得很小而且只是在div的顶部。为了弥补这一点，我想在div元素中垂直对齐我的图像。我怎么能这样做？

Answer 1

vertical-align在DIV元素中不起作用。唯一的方法是在css中将此属性设置为div：

.divClass
{
   display:table-cell;
   vertical-align:middle;
}

之后，您的DIV元素将像表格的TD元素一样。

将div中的图像与指定图像垂直位置的百分比对齐，查看链接波纹管（百分比值）：

http://reference.sitepoint.com/css/vertical-align

Answer 2

将div position:absolute及其中的图片position:relative赋予top:50%，并且页边距等于图像高度的负半。这将使图像垂直居中。

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}

img{
    position:absolute;
    top:50%;
    margin-top:-64px; /*negative half image height */
}

检查http://jsfiddle.net/qtL4n/

处的工作示例