calculation in javascript to overcome vertical-align:middle

I am trying to write a function to

1. find the image height, and then


2. perform a calculation (200px - image height)/2. Furthermore, add a css style to each different thumbnail ( .imgk{margin-top:"calculated value";} ).

Each image has a different height value, where the div has a max-width and max-height of 200x200 px. Meaning, I am unable to set a fixed value for margin-top, so I thought if I can calculate and add the css to each image.

Note: I am trying to overcome vertical-align:middle, because the div is display:block. (for display:table-cell, vertical-align will work but image(div) will not change rows to fit within window.)

So far I have the followings, but chrome is saying "img" is not defined?

<div id="container_imgk">
    <div><a href="image-1.jpg"><img src="image-1.jpg" class="imgk"></a></div>
    <div><a href="image-2.jpg"><img src="image-2.jpg" class="imgk"></a></div>
</div>

<script>
var img_th = 0;//define the variable to 0 for each new image?

if ($("img").hasClass('imgk')) {//only apply the follow to img with class imgk
var img_th = $((200-$("img").height())/2);//the caluation
    $("img").css('margin-top',img_th);//add css to class imgk
});
</script>

Thank you very much.