縦位置中央揃えvertical-alignが効かない【vertical-align】【display:table-cell;】
追記: 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が有効なのはインライン要素とテーブルセルだけ
【問題２】
以下のように指定したが、それでも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
