Question

我想垂直对齐div中的图像。

这是我使用的代码：

<div class="product-image-gallery">
<img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png">
</div>

请参阅此JSFiddle：https://jsfiddle.net/myvuacwy/

Answer 1

您可以将align-items: center与CSS3 flexible box layout一起使用，这会将内部元素与十字轴（垂直平面）的中心对齐。

JSfiddle demo

.product-image-gallery {
  height: 400px;
  display: flex;
  border: 2px solid #e3e3e3;
  align-items: center;
}
.gallery-image.visible {
  max-height: 400px;
  max-width: 400px;
}

<div class="product-image-gallery">
  <img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png">
</div>

Answer 2

您可以尝试以下代码

<div style="display: table; height:600px; overflow: hidden;">
 <div style="display: table-cell; vertical-align: middle;">
     <img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png">
 </div>

当然还有你的CSS！它会将图像对齐到中心。这是墨水https://jsfiddle.net/myvuacwy/2/

对齐图像垂直中心

2 个答案: