0

我想将图像居中到网站的中心。比当窗口调整大小时，我想完成该图像不会调整大小，而不是调整大小，它应该由浏览器窗口左右裁剪，以便图像中心位于图像的垂直中心。

<div class="image-container">
    <img src=imgpath/image.jpg">
</div>

我试过这个：

.image-container img{
   width: 100%;
   min-width: 1440 !important;
   margin: 64px auto 0 auto;
   height: auto;
   min-height: 400px !important;
}

img {
   vertical-align: middle;
}

有任何人知道如何制作这个。如果 jq 不应该这样做，我会更喜欢 CSS。

4

1 回答 1

1

您可以使用display:table-cell将内部图像对齐到 div 的中间。

但在这种情况下，您不能提供边距，因为表格单元格强制 div 充当 td，从技术上讲，您不能为表格 td 提供边距。

所以我用白色为 div 添加了边框。

.image-container{
  background: #C8BFE7;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
  border:white 5px solid
}

​</p>

演示：http: //jsfiddle.net/Arav8/3/

于 2013-01-03T14:22:03.593 回答