追記: 2017/02/16
今は flex を使うのがいいと思います。
<div style="display:flex; alignItems:center;"> <div>これが親要素に対して真ん中にくる</div> </div>
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: Kindle版
- この商品を含むブログ (1件) を見る
【問題】
あるブロック要素の中段に、インライン要素を配置したい。
以下のようにHTMLとCSSを書いたが、実現されない。
HTML
<div class="container"> <img src="ritchanperopero.jpg"> </div>
.container { vertical-align: middle; }
【原因】
vertical-alignが有効なのはインライン要素とテーブルセルだけ
【問題2】
以下のように指定したが、それでもvertical-alignが効いてくれないようだ。
.container { display: table-cell; vertical-align: middle; }
【原因】
display:table-cell;を指定するブロック要素の親に、display:table;が必要だった。
【解決】
HTML
<div class="container"> <div class="contents"> <img src="ritchanperopero.jpg"> </div> </div>
.container { display: table; } .contents { display: table-cell; vertical-align: middle; }
【参考】
thanks to
【雑感】
DRY