vertical-alignが効かない時の対処法(テキストを縦中央揃えにするには)

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

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

テキストが1行の場合

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

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

POINT

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

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

テキストが複数行の場合

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

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

<p class="sample03">テーブルセルにしてみる</p>
p.sample03 {
height:100px;
display:table-cell;
vertical-align:middle;
border:1px solid #ff0000;
}
Pocket
LINEで送る