垂直居中元素 (jQuery)

Question

HTML：

<ul>
    <li><a href="#"><img src="image1.jpg" /></a></li>
    <li><a href="#"><img src="image2.jpg" /></a></li>
</ul>

LI 是 (60px x 60px) 但里面的图像有不同的高度。我认为如果边距是动态设置的，它们可以居中：

margin-top = height-of-li - height-of-img / 2

我如何用 jQuery 做到这一点。

非常感谢！

Answer 1

var image_height = $('li').find('img').height();
var padding = (60 - image_height) / 2;
$('li').find('img').css('margin-top', padding+'px');

这有帮助吗？