Vertically centering element (jQuery)

Question

HTML:

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

LI is (60px x 60px) but the images inside have different heights. I think they can be centered if the margin is set dynamically:

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

How do I do that with jQuery.

Many thanks!

Answer 1

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

Could this help?

Answer 2

I think you can use CSS: vertical-align

<style>
#ul-id li{
   vertical-align: middle;
}
</style>

Referen here