CSSだけでサイズの違う画像をdivの上下中央に配置する方法です。
サンプルはこちら。
CSS(IE9まで)
.imgBox { margin:5px; background:#EEE; float:left; text-align: center; height:130px; width:130px; vertical-align:middle; } img { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
CSS(IE8以下も対応する場合)
.imgBox { /* IE8以下用ハック */ display: table-cell\9; layout-grid-line:130px\9; } img { /* IE8以下用ハック */ top: 0\9; vertical-align: middle\9; }
サンプルHTML
<div class="imgBox"> <img src="http://jsrun.it/assets/5/A/n/k/5Ankn.png" width="25"> </div> <div class="imgBox"> <img src="http://jsrun.it/assets/5/A/n/k/5Ankn.png" width="50"> </div> <div class="imgBox"> <img src="http://jsrun.it/assets/5/A/n/k/5Ankn.png" width="100"> </div>