vertical-alignが苦手です
CSSでの中央揃えですが、横方向中央揃えに比べ、縦方向中央揃えは難しい印象があります。
個人的なアレでマークアップから数ヶ月遠ざかっていて、久々にCSS畑に戻ってきてvertical-align使おうと思ったら...「あれ、table-cellとvertical-alignなハズだけど、どこにつけるんだっけｗ」ってなるわけです。
そろそろ覚えような...何年CSS書いてるんだよ...
結論
結論から言うと、親要素にtableを指定して、table-cellで横に並べて、vertical-alignで縦方向中央揃えを行う。
よくある間違い
自分がよく間違うのは2パターン。
- floatで横に並べようとする
- 親要素に
table-cellとvertical-alignをつけてしまう
実例
例えば、以下の様なDOM構造があったとしようね。
<div class="box">
<div class="left">ひだり</div>
<div class="right">み<br>ぎ</div>
</div>
これを縦方向中央揃えするためには、以下のように書く。
.box {
display: table;
}
.left {
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
vertical-align: middle;
}