当多次使用 css 类时，Javascript 无法正常工作？

Question

之前，我问过如何在 div 中居中对齐图像(带动态宽度)，有人用以下代码回答:

http://jsfiddle.net/WDzx4/6/

它工作正常。但是，当我尝试对另一幅图像使用相同的类时，另一幅图像不再垂直居中:

http://jsfiddle.net/b4Bbd/

你看，现在 50x50 的黑色图像比它应该的略高。我注意到只有第一张图片正确对齐。如果我之后添加具有不同宽度和高度的其他图像(使用相同的类)，它们将错位。

有人可以帮我找出问题所在，因为我对 javascript 不是很熟悉。

Answer 1

您需要包装 JavaScript 来为所有匹配的元素做所有事情，而不是为一个元素计算高度然后应用到所有元素:

$('div.container_img img').each(function() {
    var $img = $(this);
    var h = $img.height();
    $img.css('margin-top', +h / -2 + "px");
});