縦位置中央揃え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制作者のための教科書シリーズ

 

【問題】

あるブロック要素の中段に、インライン要素を配置したい。

以下のようにHTMLとCSSを書いたが、実現されない。

HTML

<div class="container">
    <img src="ritchanperopero.jpg">
</div>

CSS

.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>

CSS

.container {
    display: table;
}
.contents {
    display: table-cell;
    vertical-align: middle;
}

【参考】

thanks to

 CSSクイックリファレンス

Bowz::Notebook

０から目指すWebマスター

【雑感】

•  CSSはつくりたいベースで学んでいるけど、ちゃんと勉強しようとしたら、どういう方法があるんだろうか？
• はてなブログでHTMLのソース載せる方法ないですか

 

DRY

 

 

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】