【HTML/CSS】テキストを縦方向の中央揃えで配置する方法

HTML/CSSにおいて、『テキストを縦方向の中央揃えで配置する方法』を紹介します。

テキストを縦方向の中央揃えで配置する方法

①『line-height』

親要素の高さと、文字の行間に同じ『line-height』を指定することで縦中央に配置します。

ただしこれは「高さの指定が必須」で「テキストが1行」の場合のみです。2行以上の場合親要素からはみ出してしまいます。

See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.

②『display:flex』＋『align-items:center』

要素に『display:flex』『align-items:center』を指定することで縦中央に配置します。

横並びになってしまうため、複数行の場合は<br>で改行が必要です。

See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.

③『display:table-cell』＋『vertical-align:middle』

親要素に『display:table』子要素に『display:table-cell』『vertical-align:middle』を指定することで縦中央に配置します。

ただしこれは「高さの指定が必須」です。また、横並びになってしまうため、複数行の場合は<br>で改行が必要です。

See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.

④『padding』

『padding』の上下に同一の値を指定することで縦中央に配置します。

See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.

以上です。

本格的にHTML/CSSを学びたい方は

本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。

「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか

↓気になる方は下記リンクを参照

まとめ

今回は、HTML/CSSにおいて、『テキストを縦方向の中央揃えで配置する方法』を紹介させていただきました。

皆さまの参考になれば幸いです。