今回は、テキストの縦軸を『line-height』を使って、
中央に揃える方法をご紹介します。
テキストの縦軸を中央に揃える方法[line-height]
それでは、まずは、line-heightの使用例をご覧ください。
See the Pen QWNBWqp by ryu (@ryu-no-sss) on CodePen.
上記のデモでは、ナビゲーションを想定して作成しました。
こちらのナビーゲーションは、heightで高さを50pxに設定しており、
もし、line-heightを使わないと、1つ目のナビゲーションのように、
テキスト要素は、デモのような配置になります。
ナビゲーションのデザインにもよりますが、テキスト要素は、
なるべく縦軸に対して、中央に揃えたいので、
ここで、2つ目のナビゲーションのように、line-heightを使います。
line-heightは、heightの値と同じにすることで、縦軸に対して中央に揃います。
例：height: 100px;の場合、line-height: 100px;にする
以上のように、テキスト要素を縦軸に対して中央に揃える場合は、
line-heightを使うということも念頭に置いておきましょう。
まとめ
・テキスト要素を、縦軸に対して揃える場合、heightとline-heightの値を合わせる
今回は、テキストの縦軸をline-heightを使って中央に揃える方法を紹介しました。
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
タグ
