今作成しているサイトでtable-cellを使って高さを揃えているdivがあって、その中にテキストのdivやサイズの違う写真があります。
ちょっと困ったのが高さの小さな画像を自動で真ん中にもってきたいけど、table-cellを使っているせいで画像そのものにmargin: auto;をつかってもうまくいきやせん。
そうだ外側の箱にposition:relativeして画像をpotision:absoluteして好きな位置にもっていこうかな~。。。
あらま、うまく中央にいかんせん。
さて、それぞれに何をいれたらpotision:absoluteしたものが天地中央にいくのかなと調べてみたら・・・
やっほーいあった。
そうか全て0にしてからmargin: auto;なんだね。
とっても勉強になりました!
注目すべきCSSの記述
top: 0; left: 0; right: 0; bottom: 0; margin: auto;
実際のHTML
<div class="item_box_wrap"> <div class="item_box"> <div class="col2_box cf"> <div class="item_num">1</div> <div class="item_cate">クレンジング</div> </div> <div class="item_name">ピュアモイスチャー<br>クレンジング</div> <div class="item_fig"> <img src="../2018/01/01.png" alt="01" width="134" height="135" class="alignnone size-full wp-image-720" /></div> <div class="item_fee">150g 5,000円(税別)</div> </div><!-- .item_box -->
実際のCSS
.item_fig { text-align: center; padding: 10px; height: 140px; position: relative; } .item_fig img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
とっても参考になったサイト
もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。