jquery - 将 div 中的图像垂直居中

Question

我有这个代码用于在一堆 div 中垂直居中图像。

function centerImages(parent, image) {
    var parent_height = $(image).parent().height();  
    var image_height = $(image).height();  
    var top_margin = (parent_height - image_height)/2;  
    $(image).css( 'margin-top' , top_margin);
}
centerImages(".clients li", ".clients li img");

..但它似乎不起作用。

Answer 1

试试这个，

div.clients li img { vertical-align:middle; }

Answer 2

试试这个...

function centerImages(image) {
    var parent_height = $(image).parent().height();  
    var image_height = $(image).height();  
    var top_margin = (parent_height - image_height) / 2;  
    $(image).css( 'margin-top' , top_margin);
}
$(".clients li img").each(function() {
    centerImages(this);
});

您实际上并没有传递图像，只是传递了类选择器。上面选择了所有相关的图像并将它们传入 - 不需要 parent 参数。

Answer 3

如果您div的高度相同并且只包含图像，那是一个纯 CSS 解决方案：http:
//jsfiddle.net/Tpy2w/

相关CSS

div {
  width: 300px;
  height : 300px; 
  line-height: 300px; 
  text-align: center;    
}

div img {
  vertical-align: middle;
}

只需为 div设置一个height和相同的值。line-height然后应用vertical-align: middle在图像上