在div中垂直居中放置图像

Kevin 发表于 Dev

凯文

每个图像都有一个div父级，这些父级的宽度和高度是成比例的，问题是，我无法将每个图像水平置于其父级内部。似乎它只占用第一个元素的高度，并将其应用于其余元素。！[似乎它只占用第一个元素的高度，并将其应用于其余所有元素] [1]

function centerImages(image) {
  var parent_height = $('.thumb img').parent().height();  
  var image_height = $('.thumb img').height();  
  var top_margin = (parent_height - image_height) / 2;  
  $('.thumb img').css( 'margin-top' , top_margin);
}

$(".thumb img").each(function() {
        centerImages(this);
});

演示：http : //codepen.io/waveiron/pen/ExpLd

毛罗

您再次指向同一图像。只需更改为：

     function centerImages(image) {
    var parent_height = $(image).parent().height();  
    var image_height = $(image).height();  
    var top_margin = (parent_height - image_height) / 2;  
    $(image).css( 'margin-top' , top_margin);
}
$(".thumb img").each(function() {
    centerImages(this);
});

另外还建议添加“ px”。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。