【問題】

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

以下のように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;
}

DRY