[英]How to vertically center images of dynamic height inside a div of fixed height?
我正在使用固定高度和寬度的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”,盡管這種情況不應該發生。 不知道我的代碼在哪里出錯。
您可以使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.