Jquery - 親の高さを使用した垂直方向のセンタリングが機能します。並べ替え

Question

したがって、私は<ul><li><a> <img> </a></li></ul>（下のjqueryのクラス名は実際の<img>です）で、垂直方向に中央揃えされる画像がX個あります。 これは非常にうまくいっていますが...最初の値を取り、それを残りの画像に適用するため、最初の値が中央に配置され、他の値は中央に配置されません。

すべての画像の高さと幅が違うと付け加えることがあります。幅は今のように、単に

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

は今かなりの時間のために、このを見つめてきanchortagに text-align: center;を使用しての世話をしていると私は確かに何かを明らかに不足しています。

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