vertical-align:middleが効かない!テキストを縦中央揃えにするには

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をマイナスで指定

どうしても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では上手くいきません。
その場合は、中央に配置したい要素をdivで囲んで、widthで幅を指定して、更にmargin:0 autoを指定します。
詳しくは、
『 ページ全体などブロック要素を横中央(センター)に配置するCSS 』という記事もありますので、よかったらご覧ください。

You May Also Like !