当多次使用 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");
});

Answer 2

试试这个： http://jsfiddle.net/timothyclifford/b4Bbd/7/