emj1025 https://blog.hatena.ne.jp/emj1025/ emuramemo https://www.emuramemo.com/ HTML・CSS webデザイン ↑このような横並びボックスに縦横比の異なる画像を並べたいとき 普通に画像を配置すると、それぞれ高さが異なるのでこうなってしまいます↓ これじゃあかっこ悪いですよね。左右の中央に配置するのはmarginのautoだったり、text-align:center;だったりで結構簡単だけど、上下の中央はなかなか思い浮かばない。 そこで各ボックスの高さ分のline-heightを指定してやります。 <ul class="test">の中の各<li>のボックスの大きさが100pxの場合、 .test li { float: left; margin: 0 10px 10px 0; width: 100px;… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.emuramemo.com%2Fentry%2F2012%2F11%2F22%2F172904" title="高さの異なる画像リストを上下中央に配置する - emuramemo" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/e/emj1025/20121122/20121122171608.jpg Hatena Blog https://hatena.blog 2012-11-22 17:29:04 rich https://www.emuramemo.com/entry/2012/11/22/172904 1.0 100%