jquery jQuery でリストの中に入れた画像の垂直位置を中央にする

CATEGORY: jQuery

2013年4月15日

次のような場合、画像の大きさや、line-height の値によって、画像がうまく中央に位置しないことがある。

<ul id="cat_list" >
<li><img src="..." >テストリスト</li>
<li><img src="..." >テストリスト</li>
・・・
</ul>

このような場合、outerHeight()を使って、画像を中央（垂直方向）に表示することができる。

imgHeight = $('#cat_list ul li img').outerHeight(false);  //画像の高さを取得

liHeight = $('#cat_list ul li').outerHeight(false);  //li 要素の高さを取得

//画像の'top'をli 要素の高さから画像の高さを引いてそれを2分の1にした値に指定。
$('#cat_list ul li img').css('top',(liHeight - imgHeight)/2+'px');

この時、CSS は、画像要素の「position」を「absolute」にして、その親要素の li 要素の「position」を「relative」にする必要がある。

outerHeight(margin)
マッチした最初の要素の「外側の高さ」を返す（枠線とパディングを含む）。
margin パラメータが true ならばマージンを含めて計算するが、 false なら計算にいれない。