記事内に広告が含まれています。

vertical-align:middleが効かない!CSSでテキストを上下(縦)中央揃えにする方法

(初回公開日2017年8月30日)

h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。 vertical-alignはインライン要素とテーブルセルでしか効かないんです。

では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。 先日、これに苦しんだのでまとめておきます。

スポンサーリンク

テキストが1行の場合

See the Pen ROWROg by natsuki (@natsukimemo) on CodePen.

<p class="sample01">テキストが1行の場合</p>
p.sample01 {
border:1px solid #ff0000;  
height: 100px;    
line-height: 100px;
}

heightとline-heightに同じ値を指定します。

POINT

テキストが1行の場合の縦中央揃え

heightとline-heightに同じ値を指定

テキストが複数行の場合

入れ子にしてpositionを使います。

See the Pen vMNKqZ by natsuki (@natsukimemo) on CodePen.

<div class="sample02">
<p>テキストが<br>複数行の場合</p>
</div>
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です。

See the Pen yLyRPVE by natsuki (@natsukimemo) on CodePen.

<div class="sample03">
<p>テキストが<br>複数行の場合</p>
</div>
div.sample03 {
height: 100px;
border:1px solid #f00;
display:flex; /* ←これを指定 */
align-items: center;  /* ←これを指定 */
}

高さ中央揃えを指示しているコードは上記CSS4行目と5行目の、2行のみです。
display:flexを指定して、align-itemsプロパティでcenterを指定します。

更に横中央に配置してみます。

See the Pen BayqmWZ by natsuki (@natsukimemo) on CodePen.

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タグなどブロック要素は、横幅を指定しないと行の幅となります。

See the Pen mgerep by natsuki (@natsukimemo) on CodePen.

<p class="sample03">テーブルセルにしてみる</p>
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制作におすすめの本

スポンサーリンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

スポンサーリンク
スポンサーリンク
スポンサーリンク

当ブログ利用サーバー

スポンサーリンク
スポンサーリンク