对齐图像垂直中心

-1

我想垂直对齐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/

来源

2015-11-08 Henk Z

可以使用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>

来源

2015-11-08 17:59:44

你可以试试下面的代码

<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/

来源

2015-11-08 18:00:17 Bharat

对齐图像垂直中心

回答

相关问题