Блог

Главная - Вопросы по программированию - Javascript не работает корректно, когда класс css используется более одного раза?

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

#javascript #css #vertical-alignment

#javascript #css #выравнивание по вертикали

Вопрос:

Ранее я спрашивал, как выровнять изображение по центру (с динамической шириной) внутри div, и кто-то ответил этим кодом:

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

Он работает корректно. Однако, когда я пытаюсь использовать тот же класс для другого изображения, другое изображение больше не центрируется по вертикали:

http://jsfiddle.net/b4Bbd/

Теперь вы видите, что черное изображение размером 50×50 немного больше, чем должно быть. Я заметил, что только первое изображение выравнивается правильно. Если после этого я добавлю другие изображения с другой шириной и высотой (используя тот же класс), они будут смещены.

Может ли кто-нибудь помочь мне найти проблему, поскольку я на самом деле не знаком с javascript.

Ответ №1:

Вам нужно обернуть JavaScript, чтобы сделать все для всех совпадающих элементов, вместо того, чтобы вычислять высоту для одного и применять ко всем:

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

Ответ №2:

Попробуйте это: http://jsfiddle.net/timothyclifford/b4Bbd/7 /