プログラミングを勉強中のみなさん、こんにちは！
余白を均等に設定したのに、文字が（高さ的に）中央にきてないような・・・・。
と疑問を感じた方へ。
line-height を試してください。
詳しく見ていきます。
私の経験
*********＜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
中央寄せ関連の記事も紹介します。↓
-
position:absolute で要素を中央寄せにする方法
続きを見る
