vertical-align:middleが効かない！CSSでテキストを上下（縦）中央揃えにする方法
(初回公開日2017年8月30日)
h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。 vertical-alignはインライン要素とテーブルセルでしか効かないんです。
では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。 先日、これに苦しんだのでまとめておきます。
テキストが1行の場合
1 | <p class="sample01">テキストが1行の場合</p> |
1 2 3 4 5 | p.sample01 {border:1px solid #ff0000; height: 100px; line-height: 100px;} |
heightとline-heightに同じ値を指定します。
POINT
テキストが1行の場合の縦中央揃え
heightとline-heightに同じ値を指定
テキストが複数行の場合
入れ子にしてpositionを使います。
1 2 3 | <div class="sample02"><p>テキストが<br>複数行の場合</p></div> |
1 2 3 4 5 6 7 8 9 10 11 | div.sample02 {height: 100px;position:relative;border:1px solid #ff0000;}div.sample02 p {position:absolute;top: 50%;line-height: 1.5em;margin-top: -1.5em; /* 2行の場合 */} |
入れ子の内側の要素にtopを50%とline-heightを指定します。
margin-topをline-height × 行数 / 2をマイナスで指定します。
POINT
テキストが複数行の場合の縦中央揃え
1. 要素を入れ子にして、positionを指定
2. 入れ子の内側の要素にtopを50%とline-heightを指定し、更にmargin-topをline-height × 行数 / 2をマイナスで指定
flexboxを使う(2019/6追記)
flexboxは、少ないコードで複雑なレイアウトが組める便利なCSSです。
1 2 3 | <div class="sample03"><p>テキストが<br>複数行の場合</p></div> |
1 2 3 4 5 6 | div.sample03 {height: 100px;border:1px solid #f00;display:flex; /* ←これを指定 */align-items: center; /* ←これを指定 */} |
高さ中央揃えを指示しているコードは上記CSS4行目と5行目の、２行のみです。
display:flexを指定して、align-itemsプロパティでcenterを指定します。
更に横中央に配置してみます。
1 2 3 4 5 6 7 | div.sample03 {height: 100px;border:1px solid #f00;display:flex;align-items: center; justify-content: center; /*←これを加えただけ*/} |
CSS6行目justify-content: center;を追加すれば横中央に配置されます。
どうしてもvertical-align:middleを使いたい時
vertical-alignはインライン要素とテーブルセルでしか効きません。 displayを使ってブロック要素を強引にインラインやテーブルセルにしてしまうという方法があります。 ですが、display:inlineは幅や高さの指定が出来ないため、display:table-cellを使います。
テーブルセルとなった場合、横幅はwidthを指定しないと、テキストの幅となります。
pタグなどブロック要素は、横幅を指定しないと行の幅となります。
1 | <p class="sample03">テーブルセルにしてみる</p> |
1 2 3 4 5 6 | p.sample03 {height:100px;display:table-cell;vertical-align:middle;border:1px solid #ff0000;} |
インライン要素・ブロック要素の横中央配置は
vertical-align:middleで縦中央に配置して、更に横中央に配置する方法ですが、テキストが1行の場合は、text-align:centerが使えます。
ですが、複数行になるとtext-align:centerでは上手くいきません。
要素を縦なり横なり配置する際に考えなくてはいけないことは、その要素がインライン要素かブロック要素か、ということです。
最近ではflexboxを使う方法が簡単で便利ですが、昔ながらのやり方のtext-alignやmarginを使った方法はhtmlの基本構造がわかっていないと上手く活用できません。
私自身の理解の整理のために、text-alignとmarginを使った横中央揃えにする方法についても記事にしていますのでよろしければご覧ください。
この記事がお役に立てると幸いです。
【番外】WEB制作におすすめの本
【番外】パソコン時短技
知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。
