こんにちはtakosanです。
今回は初心者がよく「なるほどわからん」となりがちな「vertical-align」の使い方を例と共にご紹介します。
vertical-alignが使える2つのパターン
vertical-alignを使うためには、セットで設定するべき2つのタイプのdisplayが存在します。
- display:inline-block
- display:table-cell
この二つです。
それぞれの使い方を見ていきましょう。
①display:inline-blockでvertical-alignを使う
まずは実際のコードをみてみましょう。
See the Pen inline-block/vertical-align by yukiwebcreate (@Yukiwebcreate) on CodePen.
parentに背景色をつけて分かりやすくしています。
inline-blockでのvertical-alignは隣り合う要素との関係性を見て高さを調整します
決して親要素の真ん中とするわけではない点がミソです。
②display:table-cellでvertical-alignを使う
同様に実際のコードを見てみましょう。
See the Pen yLeevVP by yukiwebcreate (@Yukiwebcreate) on CodePen.
こちらは少し違って、上や下に並べたい要素の親要素にdisplay:table-cellとvertical-alignを設定しています。
つまり親要素に対しての真ん中に子要素を配置することができるのです。
知ってる方だけでいいですが、flex-boxに近い感覚です。
【おまけ】table-cellの場合のよくある間違い、注意点
配置したい文字そのものに設定してしまう
もしこんな書き方をすると・・・
//中央揃え
.box01{
width: 100px;
height: 200px;
background-color: #D9534E;
border:1px solid #FFF;
}
.box01 p{
display: table-cell;
vertical-align: middle;
}
思うようには動きません。上や下などに実際に配置したい要素の親要素に記述してみましょう。
heightを設定していない
実はheight(高さ)の記述がないとうまく動きません。よくあるミスなので注意しましょう。
で、どっちがいいの?
それぞれに適した使い方があるため一概にどちらがいいとは言えません。
ただ、table-cellを使う場合は先ほど少し触れたようにflex-boxに近い仕組みになるので、
table-cellで中央や上下に揃える場合はflex-boxで一度検討した方がいいかなと思います。
では今日はこの辺で。