Почему jQuery скрипт применяется через раз и в стилях элемента не видно активных свойств?

Question

[Александр Журавлев]

Здравствуйте! Странная штука. Сделал скрипт, чтобы картинка вертикально центрировалась внутри каждого блока с товаром. Для этого сделал скрипт, который залазит в каждый блок товара, высчитывает высоту картинки и делает ей top:50% и margin-top: -высота/2. Почему-то срабатывает через раз. Причем в панели разработчика хром видно в элементах, что прописан стиль, а в правой части панели стиль не видно. А иногда вообще не работает. Почему так может быть?
Код:

$('.product-1 .col-md-3').each(function(){
		var productImgHgt = $(this).find('.img img').height();
		if( productImgHgt != 0 ){
			$(this).find('.img img').css({
					'top': '50%',
					'margin-top': -productImgHgt/2+'px'
			});
		}
	});

Картинки:


После перезагрузки страницы:


И так через раз.

И еще больше странностей. Когда сделал условие на проверку if( productImgHgt != 0 )
то теперь работает, но в стилях никогда не отображается, хотя раньше работало через раз, и когда работало то в стилях отображалось

Answer 1

[Ankhena]

Для расположения по середине по вертикали есть методы попроще, например:

top: 50%;
transform: translateY(-50%);

либо использовать display: flex или table

Comments

[Ankhena]

Александр Журавлев у меня эффект "через раз" был только когда скрипты и стили грузились асинхронно