WEB制作

【CSS】余白を均等にしているのに、文字の高さが中央に来ない こんときは line-height を試してみよう

スポンサーリンク

height

プログラミングを勉強中のみなさん、こんにちは!

余白を均等に設定したのに、文字が(高さ的に)中央にきてないような・・・・。
と疑問を感じた方へ。

line-height を試してください。

詳しく見ていきます。

目次
  1. 私の経験
  2. 解決方法
  3. まとめ

私の経験

*********<div>*********************
padding-top 10px
------------------------------

文字 font-size 30px

------------------------------
padding-bottom 10px
**********</div>*******************

 

こんなイメージでコーディングしました。

余白の上下は 10px で同じなのですから、
当然文字の高さは要素の中央にくる、と思いますよね。

 

しかし、実際のプレビューでは、

 

*********<div>*********************
padding-top 10px
------------------------------

 

文字 font-size 30px(下に偏っている)

------------------------------
padding-bottom 10px
**********</div>*******************

こんな感じで、文字自体が下方向に偏ってしまいました。

解決方法

そこで試したのが line-height です。
CSSで、文字<p>に対して line-height を設定しました。
値は font-size と同じ 30px です。
<line-height:30px;>

そうすると、イメージしたとおり、

*********<div>*********************
padding-top 10px
------------------------------

文字 font-size 30px

------------------------------
padding-bottom 10px
**********</div>*******************

文字が(高さ的に)中央にきました。

まとめ

他にも解決方法があるかもしれませんが、ひとまず参考の一つとして、
line-heightでの対処法を御紹介しました。

余白は均等なのに、高さ的に偏っている現象は、
line-height をお試しください。

line-heightの詳細はこちらもどうぞ。
line-height

 

中央寄せ関連の記事も紹介します。↓

center
【CSS】position:absolute で要素を中央寄せする方法をご紹介

続きを見る

スポンサーリンク

-WEB制作
-, , , , , ,

© 2023 WEBセンス Powered by AFFINGER5