Javascript не работает правильно, когда класс CSS используется более одного раза?

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/