【CSS】vertical-alignが効かない時はこれを試す

こんにちは。
CSSって簡単なようで深いですよね。

今回は、vertical-alignがうまく効かないときのTipsです。

vertical-alignって?

よくtext-alignは見ますよね。テキストを左、右、中央揃えどこにするか指定するCSSプロパティの一つです。

vertical-alignは縦位置の指定です。

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
引用:vertical-align-スタイルシートリファレンス

divで要素を真ん中にしたいけど効かないよ!

実はvertical-alignはブロック要素では適用できません。
インライン要素とテーブルセルだけなんです。

なのでtableとかでは凄く簡単に中央に来てくれます。

もちろんdivなどでできないわけではありません。displayプロパティで明示的に要素の種類を変更して実装できます。

displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用します。
引用:display-スタイルシートリファレンス

実装

こんなかんじです。上がdisplay未指定。下はdisplay:table-cell;をつけています。

See the Pen bNepeQ by Tsukasa Nagata (@nt-uni) on CodePen.0

まとめ

それでもdisplayを変えられなかったりすれば、「%」でMarginを指定したりと、やり方は一つではありません。
そのために色々な指定の方法、表現の方法を知っておくのが大事ですね。

フォローして続編をチェック

@universionsをフォロー