高さの異なる画像リストを上下中央に配置する - emuramemo↑このような横並びボックスに縦横比の異なる画像を並べたいとき 普通に画像を配置すると、それぞれ高さが異なるのでこうなってしまいます↓ これじゃあかっこ悪いですよね。左右の中央に配置するのは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; } こんな感じに上下中央に配置されます。きれいですね
