垂直对齐分割图像

Question

我目前正在尝试在图像旋转器（SlideDeck）中垂直对齐图像。目前的图像都与顶部对齐，尽管我需要将它们与中间对齐。图像的高度各不相同。

我尝试了许多方法，例如绝对对齐等，但没有运气。

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

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

.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;
}

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