在javascript中计算以克服vertical-align：middle

Question

我正在尝试编写一个函数

1. 找到图像高度
2. 执行计算（200px - 图像高度）
3. 为每个不同的缩略图添加css样式（.imgk{margin-top:"calculated value";}）。

我无法为margin-top设置固定值，因为图像大小不一。它们被放置在一个单独的div中，我设置了qxxswpoi和qxxswpoi为200x200像素。我想如果我可以计算并添加每个图像的CSS。

注意：我正在努力克服max-width，因为div是max-height。 （对于vertical-align:middle，vertical-align将起作用，但image（div）不会更改行以适合窗口。）

这就是我现在所拥有的并且chrome说“img”没有定义？

display:block

非常感谢你。

Answer 1

使用

display:table-cell

Answer 2

jQuery

<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>

方法接受一个函数作为参数，你可以使用：

$('img.imgk').each(function(){
    var self = $(this),
        height  = self.height();

    self.css({
       'margin-top': (200 - height)/2
    });
});

Answer 3

你可以试试位置：.css()

例：

$('img.imgk').css('margin-top', function(){
     return (200 - $(this).height()) / 2;
});