↑このような横並びボックスに縦横比の異なる画像を並べたいとき 普通に画像を配置すると、それぞれ高さが異なるのでこうなってしまいます↓ これじゃあかっこ悪いですよね。左右の中央に配置するのは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; } こんな感じに上下中央に配置されます。きれいですね
![高さの異なる画像リストを上下中央に配置する - emuramemo](https://cdn-ak-scissors.b.st-hatena.com/image/square/9de4bb28a914b8ad69c823e4d0d55851d9e16c37/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fe%2Femj1025%2F20121122%2F20121122171608.jpg)