Question

I have a fluid grid layout, 3 rows, each with 3 different % width blocks. Essentially this is a 3×3 grid that expands both horz and vert in the viewport, albeit different width blocks. In each block, there is an image set to 100% width.

I wrote this small script to vertically align these images within the blocks, however, the margin-top is applying the same value to all the images. I need it to apply the value to the individual images.

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

The CSS on the grid-item-img is:

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

Thanks!

Answer 1

Use 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');