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而不将其用作背景，那么“container”类可能是您的.div

垂直对齐分割中的图像

1 个答案: