如何將動態高度的圖像在固定高度的div內垂直居中？

Question

我正在創建一個帶有高度和寬度固定的div的可變高度圖像的圖庫。我的父div的高度是460px。我希望所有小於460像素高度的圖像在div中心垂直對齊。

這裏是我的js代碼：

$(document).ready(function(){ 
     var elemst = document.getElementsByName("pictureDiv"); 
     var img = $('.x-simple img'); 
     var parentdiv = $('.x-simple'); 
     for (var i=0;i<elemst.length;i++) 
     { 
      var ph = parentdiv.height(); 
      var h = img.height(); 
      console.log('img height' + h); 
      var mh = Math.ceil((ph - h)/2); 

      if(mh>0){ 
       $('.x-simple img').css('margin-top', mh); 
      } 
      else 
      { 
      $('.x-simple img').css('margin-top', 0); 
      } 
     } 
     }); 

我的HTML：

<div class="col-md-12"> 
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
    <div class="xoverlay x-simple" name="pictureDiv"> 
     <a href="#" target="_blank"> 
       <img class="x-img-main" src="pic1.jpg"> 
     </a> 
    </div> 
</div> 
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
    <div class="xoverlay x-simple" name="pictureDiv"> 
     <a href="#" target="_blank"> 
       <img class="x-img-main" src="pic2.jpg"> 
     </a> 
    </div> 
</div> 
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
    <div class="xoverlay x-simple" name="pictureDiv"> 
     <a href="#" target="_blank"> 
       <img class="x-img-main" src="pic3.jpg"> 
     </a> 
    </div> 
</div> 
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
    <div class="xoverlay x-simple" name="pictureDiv"> 
     <a href="#" target="_blank"> 
       <img class="x-img-main" src="pic4.jpg"> 
     </a> 
    </div> 
</div> 

我的代碼的問題是它給了我只有一個473px一定的高度，如果我做了console.log（'img height'+ h）;這是我第一張圖片的高度。 另外，我可以看到「margin-top：0px」被添加到我的所有照片中，不論其高度如何。雖然不應該發生，但是較小高度的圖像也會添加「margin-top：0px」。不知道我在哪裏在代碼中犯錯誤。

Answer 1

可以使用each()爲在它們之間迭代

$(document).ready(function() { 
 

 
    $('.x-simple').each(function() { 
 
    var $this = $(this), 
 
     $img = $this.find('.x-img-main'), 
 
     ph = $this.height(), 
 
     h = $img.height(), 
 
     mh = Math.ceil((ph - h)/2); 
 
    if (mh > 0) { 
 
     $img.css('margin-top', mh); 
 
    } else { 
 
     $img.css('margin-top', 0); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
 
    <div class="xoverlay x-simple" name="pictureDiv"> 
 
     <a href="#" target="_blank"> 
 
     <img class="x-img-main" src="pic1.jpg"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
 
    <div class="xoverlay x-simple" name="pictureDiv"> 
 
     <a href="#" target="_blank"> 
 
     <img class="x-img-main" src="pic2.jpg"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
 
    <div class="xoverlay x-simple" name="pictureDiv"> 
 
     <a href="#" target="_blank"> 
 
     <img class="x-img-main" src="pic3.jpg"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap"> 
 
    <div class="xoverlay x-simple" name="pictureDiv"> 
 
     <a href="#" target="_blank"> 
 
     <img class="x-img-main" src="pic4.jpg"> 
 
     </a> 
 
    </div> 
 
    </div>