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

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

1 个答案: