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

Question

我正在使用固定高度和宽度的div内的可变高度的图像创建图像库。 我父母div的高度是460像素。 我希望所有小于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>

我的代码的问题是，如果我执行console.log（'img height'+ h）;，它只能给我一个恒定的473px高度。 这是我的第一张图片的高度。 我也可以看到“ 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>