css - 垂直对齐分区中的图像

Question

我目前正在尝试在图像旋转器 (SlideDeck) 中垂直对齐图像。当前图像全部对齐到顶部，但我需要将它们对齐到中间。图片的高度各不相同。

我已经尝试了很多方法，比如绝对对齐等，但没有成功。

请参阅:http://bcc1.olivernewth.com/houses/the-lindens/

更新:我现在找到了一种方法(图像旋转器现在通过使用背景使图像垂直居中)。不过，我不确定这是否是最好的方法，因为没有 Alt 文本并且与旧版浏览器不兼容...有什么建议吗？

.div {
  background:       url(image.jpg) no-repeat center center; 
  width:            960px; 
  height:           384px; 
  background-size:  100%; 
  background-width: 960px;
}

Answer 1

下面的代码将垂直和水平对齐您的图像。

.container {
    width: 960px;
    height: 384px;
    display: block;
    line-height: 382px;
    overflow: hidden;
    text-align: center;
}
.container img {
    vertical-align: middle;
}

如果您选择将图像插入 HTML 而不是将它们用作背景，则“容器”类可能是您的 .div