How do I make the image float in the middle vertically?

Question

I am using a bootstrap design here.

I am trying to do the below. This is where I set the div tag height surrounding the image to be the same as the width manually. This makes it such that the white space above and below the image is the same.

However, if the browser resizes, the image width and height will change accordingly. I cannot set a fixed height as the image will remain at its size and will not resize accordingly. But however if I do not set it, the image will float to the top, and the height of the overall box will be different from the rest of the boxes.

Setting padding-bottom and top to 50% to set ratio to 1:1, however this does not work. (This makes the box bigger than it should, and screws up the ratios)

<div class="product">
<div class="product-img">
        <img src="http://127.0.0.1:8080/SpGames/admin/gameimage.jsp?game_id=1" alt="" style=""> 
    </div>
    <div class="product-body">
        <p class="product-category">Category</p>
        <h3 class="product-name"><a href="#">product name goes here</a></h3>
        <h4 class="product-price">$980.00 <del class="product-old-price">$990.00</del></h4>
        <div class="product-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
        <div class="product-btns">
            <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
            <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
            <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
        </div>
    </div>
    <div class="add-to-cart">
        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
    </div>
</div>

The height of the entire box should be the same as the rest, and the image to be vertically aligned in the middle with the rest.

score -1 · Answer 1 · answered May 19 '19 at 08:00

The best cross-browser way is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>

The issue here is, with bootstrap the image height and width will change according to browser size. I cannot set a permanent width or height. — Amos Ng, May 19 '19 at 08:03
Please refer to this answer: https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height — nobi malik, May 19 '19 at 08:07

score -1 · Answer 2 · answered May 19 '19 at 08:33

-1

Use flexbox:

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

answered May 19 '19 at 08:33

Melbourne2991

11,707
12
44
82

How do I make the image float in the middle vertically?

2 Answers2