1,548 views

この記事は最終更新から 2794日 が経過しています。

(1) やりたいこと

ブロック要素（今回はたまたまDIV）の中に表示するテキストを上下方向中央に表示したい。

でも、「vertical-align: middle」はブロック要素に対しては効かないのでこんな風になってしまう。

(2) 解決策

こんな時はブロック要素の「height」と「line-height」を同じにするとよい。

line-heightとは直訳したまんま 1行の高さのこと。
すなわち、2行以上を表示しようとすると、2行目以降は完全にはみ出してしまいブロック要素内に収まらないので注意。

おまけ：別解

1) DIVをブロック用でなくす

ブロック要素に「vertical-align:middle」と「display:table-cell」を指定して非ブロック要素にすると…

確かに中央に寄ってくれるが、他にもいろいろと指定しないといけなくなった…