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

Question

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

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

$(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`
} );