CSS WEB制作

【CSS】余白を上下均等にしているけど文字が中央に来ない!を解決

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
position:absolute で要素を中央寄せにする方法

続きを見る

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5