Jquery - 부모 높이를 사용한 세로 가운데 맞춤이 작동합니다.

Question

의 정렬 따라서, <ul><li><a> <img> </a></li></ul> (아래 jquery의 클래스 이름은 실제 <img>입니다.)에 X 개의 이미지가 세로로 가운데에 표시됩니다. 이것은 beatufully 작동하지만 ... 그것은 단지 첫 번째 가치를 소요하고 나머지 이미지에 적용, 결과 가운데 하나와 다른 사람이 아닌 결과.

모든 이미지의 높이와 너비가 다르다고 추가 할 수 있습니다. 폭은 지금과 같은, 단순히

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