如何在固定高度的div内垂直居中动态高度的图像？

Posted 2023-02-19

【中文标题】如何在固定高度的div内垂直居中动态高度的图像？

【英文标题】：How to vertically center images of dynamic height inside a div of fixed height?

【发布时间】：2015-08-05 06:24:52

【问题描述】：

我正在创建一个图像库，其中包含在固定高度和宽度的 div 内的可变高度图像。我父 div 的高度是 460px。我希望所有小于 460px 高度的图像在 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>

我的代码的问题是，如果我执行 console.log('img height' + h);这是我的第一张图片的高度。 我还可以看到“margin-top:0px”被添加到我的所有图片中，无论它们的高度如何。高度较小的图像也会添加“margin-top:0px”，尽管它不应该发生。不知道我的代码哪里出错了。

【问题讨论】：

这可能也有帮助：***.com/q/12284044/939986 (How to split page into 4 equal parts?) without javascript.

【参考方案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>

【讨论】：

啊我需要添加一个 foreach 循环来循环所有图像。谢谢@Pranav C Balan。但是一个问题。为什么我使用的 for 循环不起作用？

img.height() 可能总是返回第一个 div 中第一个图像的高度