居中圖像在垂直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");

..但它似乎沒有工作。

來源

2012-08-01 3zzy

你能張貼有關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); 
});

你實際上沒有傳遞圖像，只是類選擇。以上選擇所有相關圖像並將其傳入 - 不需要父參數。

來源

2012-08-01 10:26:39 Archer

如果您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。然後圖像

來源

2012-08-01 10:29:11 fcalderan

喜歡它應該:)即使父母的高度並不總是相同的，我更喜歡只改變與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; }

來源

2012-08-01 10:32:56 turankonan

來計算和更改圖像的「margin-top」，如果父母的「line-height」不等於「height」。 – fcalderan 2012-08-01 10:33:59

居中圖像在垂直div div

回答

相關問題