2018.06.01

14. 縦方向の中央寄せ・行の高さの調整 line-height

目次

縦方向の中央寄せ

下の例で、テキストを水色の箱の中央に持っていきたかったとします。


横方向の中央寄せはtext-align:center;でできますが、縦方向に中央に揃えるにはどうすればいいでしょう?
padding-topで地道に調整してもいいですが、かなり面倒です。
このような場合は、pのline-heightの値を親要素のheightと等しくしてあげればOKです。



行の高さの調整

そもそもline-heightは行の高さを指定するプロパティで、例えばfont-sizeが20pxでline-heightを30pxにすると、上下にそれぞれ5pxの余白が生まれることになります。


font-sizeを20px、line-heightを20pxとすると、フォントサイズと行の高さが一致するので、ぎっちりと詰まって見えます↓↓

line-heightをfont-sizeより小さくすると行が重なって見えますが、意図的に使うことはあまりないでしょう↓↓

値を数値で指定する

line-heightの値はpxだけでなく数値で指定することもできます。
下の例では1.5としていますが、font-sizeの1.5倍なので、30pxになります。
もちろん、1.75など、もっと細かい単位での指定もできます。


line-heightはpxで指定すると、font-sizeを変えたときに調整のためにいちいち指定し直さないといけないので、1.5のように数値で指定するのがおすすめです。

home

scroll