-1

I want to vertical align an image inside a div.

This is the code I use:

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

See this JSFiddle: https://jsfiddle.net/myvuacwy/

JGeer
  • 1,768
  • 1
  • 31
  • 75

2 Answers2

1

You can use align-items: center with CSS3 flexible box layout which will align the inside elements to the center of the cross axis(Vertical plane).

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>
m4n0
  • 29,823
  • 27
  • 76
  • 89
0

You can try the following code

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

along with your css of course! it will align the image to center. here is the ink https://jsfiddle.net/myvuacwy/2/

Bharat
  • 287
  • 1
  • 5
  • 14