0

所以，我有 X 数量的图像在 a 中垂直居中<ul><li><a> <img> </a></li></ul>（下面 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);
});

盯着这个已经有一段时间了，我肯定错过了一些明显的东西。

4

1 回答 1

2

如果图像需要不同的值，您需要遍历它们。尝试使用$('.tv-list-channel-logo').each( function... ). Inside .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`
} );
于 2012-04-13T12:44:32.473 回答