行間の高さでテキストを垂直方向にセンタリングする方法をご紹介いたします。

ポイントは3行目の「line-height」で2行目の「height」と同じ値を指定することです。ここでは「height」を「40px」としているので、「line-height」も「40px」としています。

こうするとパディングの上下で調整をする必要がなく、垂直方向にセンタリング表示されます。

ただ、line-heightで行の高さを指定しているため、改行する場合などはこの方法は使用できません。デザインにもよりますが、2行になり改行がされると表示崩れが起きます。

1
2
3
4

.center {
  height: 40px;
  line-height: 40px;
}

HTMLソースではシンプルにテキストとdivのみを記述しています。

1
2
3

<div class="center">
    テキスト
</div>

サンプル

CSS

1
2
3
4
5
6

.center {
  width: 400px;
  height: 40px;
  line-height: 40px;
  background: #EFEFEF;
}

HTML

1
2
3

<div class="center">
    テキスト
</div>