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

投稿者: | 2017年11月16日

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」を指定して非ブロック要素にすると…

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


アクセス数(直近7日): ※試験運用中、BOT除外簡易実装済
  • 2025-07-11: 0回
  • 2025-07-10: 0回
  • 2025-07-09: 0回
  • 2025-07-08: 0回
  • 2025-07-07: 0回
  • 2025-07-06: 0回
  • 2025-07-05: 0回
  • コメントを残す

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


    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)