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

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

 

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

これじゃあかっこ悪いですよね。左右の中央に配置するのは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;
}

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

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