Jquery - Vertikale Zentrierung mit der übergeordneten Höhe funktioniert. So,

Question

Also, ich habe X Anzahl der Bilder vertikal mit in einer <ul><li><a> <img> </a></li></ul> zentriert werden (der Klassenname in der Jquery unten ist die tatsächliche <img>). Dies funktioniert sehr gut, aber ... Es nimmt nur den ersten Wert und wendet es auf den Rest der Bilder an, was dazu führt, dass der erste zentriert wird und die anderen nicht.

Ich könnte hinzufügen, dass alle Bilder unterschiedliche Höhen und Breiten haben. Die Breiten werden betreut ab sofort, einfach durch text-align: center; auf dem anchortag mit

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

schon seit geraumer Zeit auf diesem starren und ich fehle sicherlich etwas offensichtlich.

Answer 1

Wenn die Bilder unterschiedliche Werte benötigen, müssen Sie sie durchlaufen. Versuchen Sie es mit $('.tv-list-channel-logo').each(function...). Inside .each, this bezieht sich auf das aktuelle Element.

EDIT: Hier ist ein Beispiel für .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` 
});