0

したがって、X個の画像を垂直方向に中央揃えする必要があります<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... )。内部.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 に答える