jquery垂直中心不同尺寸的多个图像

Question

我有一个流体网格布局，3行，每个都有3个不同的％宽度块。本质上，这是一个3x3网格，扩大视口中的horz和vert，尽管宽度不同。在每个块中，有一个图像设置为100％宽度。

我写了这个小脚本来垂直对齐块中的这些图像，但是，margin-top将相同的值应用于所有图像。我需要它将值应用于单个图像。

<script> 
$(window).on('resize', function() { 
var $gii = $('.grid-item-img'); 
var giih = $gii.height(); 
$gii.css('margin-top', + giih/-2 + "px"); 
}).trigger('resize'); 
</script> 

对电网项目-IMG的CSS是：

.grid-item-img {display: block; width: 100%; position: absolute; top: 50%;} 

谢谢！

Answer 1

使用jQuery .each()：

$(window).on('resize', function() { 
    $('.grid-item-img').each(function(index, element) { 
     var $element = $(element); 
     $element.css('margin-top', + $element.height()/-2 + "px"); 
    }); 
}).trigger('resize');