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

divheightに同じものを設定するだけです。line-height次にvertical-align: middle、画像に適用します