居中图像在垂直div div

问题描述：

我有这个代码垂直居中一堆divs中的图像。居中图像在垂直div 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");

..但它似乎没有工作。

你能张贴有关HTML以及请 – 2012-08-01 10:25:37

贵格都具有相同的高度，并且只含有图像？在这种情况下，您可以在纯CSS中实现相同的行为 – fcalderan 2012-08-01 10:27:58

@ F.Calderan是的，他们可以。怎么样？ – 3zzy 2012-08-01 10:28:29

答

试试这个...

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); 
});

你实际上没有传递图像，只是类选择。以上选择所有相关图像并将其传入 - 不需要父参数。

答

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

相关CSS

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

div img { 
    vertical-align: middle; 
}

只需设置一个height并为同一line-height DIV。然后图像

喜欢它应该:)即使父母的高度并不总是相同的，我更喜欢只改变与JS父母的高度和lineheight。 – 2012-08-01 10:31:46

是的，这是可取的，因为它不需要通过js – fcalderan 2012-08-01 10:35:43

答

尝试这一项就适用vertical-align: middle，

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

来计算和更改图像的“margin-top”，如果父母的“line-height”不等于“height” 。 – fcalderan 2012-08-01 10:33:59

居中图像在垂直div div

相关推荐