Question

每张图片都有一个div父母，这些父母＆＃39;宽度和高度是成比例的，问题是，我不能将每个图像水平放在其父级内。它似乎只需要第一个元素的高度并将其应用于其余元素。！[似乎它只需要第一个元素高度并将其应用于所有其余元素] [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

Answer 1

你再次指向同一张图片。只需更改为：

     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”也是如此。

Answer 2

您错过了添加px：

$('.thumb img').css( 'margin-top' , top_margin + "px");

（我还建议尽可能缓存jQuery对象：

var $image = $(image);
var parent_height = $image.parent().height();
var image_height = $image.height();

）

Answer 3

一种方法是在两个元素上使用高度为100％且垂直对齐：中间的内联块助手。

或者，如果您不想在现代浏览器中使用额外元素并且不介意使用IE表达式，则可以使用伪元素并使用方便的表达式将其添加到IE，每个元素只运行一次，因此不会出现任何性能问题

如果我正确地解答你的问题......

在div中垂直居中图像

3 个答案: