(29) 【CSS】DIV要素の中の文字を中段に表示

(1) やりたいこと

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

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

(2) 解決策

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

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

おまけ:別解

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

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

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です