Jquery - 使用父高度的垂直居中。有点

Question

因此，我在 <ul><li><a> <img> </a></li></ul> 中有 X 幅图像要垂直居中(下面 jquery 中的类名是实际的 <img> )。这工作得很好但是......它只采用第一个值并将其应用于其余图像，导致第一个居中而其他不居中。

我可能会补充一点，所有图像的高度和宽度都不同。截至目前，宽度已得到处理，只需使用 text-align: center; 即可。在 anchor 标签上

$(window).load(function(){
    var parent_height = $('.tv-list-channel-logo').parent().height();
    var image_height = $('.tv-list-channel-logo').height();
    var top_margin = (parent_height - image_height)/2;
    $('.tv-list-channel-logo').css( 'margin-top' , top_margin);
});

现在已经盯着这个看了很长一段时间，我肯定遗漏了一些明显的东西。

Answer 1

如果图像需要不同的值，您需要遍历它们。尝试使用 $('.tv-list-channel-logo').each( function... )。在 .each 中，this 引用当前元素。

编辑:这是一个 .each 的例子:

// `.each` takes each selected element and calls the callback on each one
$('.tv-list-channel-logo').each( function( ) {
    // `this` refers to the current .tv-list-channel-logo element
    var parent_height = $(this).parent().height();
    var image_height = $(this).height();
    var top_margin = (parent_height - image_height)/2;
    $(this).css( 'margin-top' , top_margin);
    // I just replaced all instances of `'.tv-list-channel-logo'` with `this`
} );