emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

高さの異なる画像リストを上下中央に配置する

f:id:emj1025:20121122171602j:plain

↑このような横並びボックスに縦横比の異なる画像を並べたいとき

 

普通に画像を配置すると、それぞれ高さが異なるのでこうなってしまいます↓

f:id:emj1025:20121122171604j:plain

これじゃあかっこ悪いですよね。左右の中央に配置するのはmarginのautoだったり、text-align:center;だったりで結構簡単だけど、上下の中央はなかなか思い浮かばない。

 

そこで各ボックスの高さ分のline-heightを指定してやります。

 

 

<ul class="test">の中の各<li>のボックスの大きさが100pxの場合、

.test li {
  float: left;
    margin: 0 10px 10px 0;
    width: 100px;
    height: 100px;
    line-height: 100px; 
} .test img { vertical-align: middle; }

 

f:id:emj1025:20121122171608j:plain

こんな感じに上下中央に配置されます。きれいですね。

line-heightはけっこう使えるいいやつなんです。vertical-alignも忘れずに。

 

emuramemo(c) All Rights Reserved.