【CSS】vertical-alignの使い方

プログラミング

こんにちは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で一度検討した方がいいかなと思います。

では今日はこの辺で。

タイトルとURLをコピーしました