本日のプログラミング学習
HTML & CSS / 1hour
Aug / 57.5hour
Total / 82.5hour
参考テキスト
テキストの上下中央揃え-line-heightの仕組み
サンプルサイトを作成している時に、aタグやpタグといった要素の上下中央にテキストを配置するため、「line-height」がある。
（テキストが1行の場合）
正直、今までどういう原理で上下中央になっているか理解できていなかったので、まとめる。
＜line-heightプロパティ＞
元々このプロパティは「行の高さ」を指定するもの。
それはつまり、「文字の大きさ」＋「文字の上下の余白」を決めるというもの。
例えば、フォントサイズ20pxでline-heightが30pxだとすると、以下のような表示になる。
引用元：https://udemy.benesse.co.jp/development/web/line-height.html
で、よくコーディングをしてて遭遇するのがdivなどの中に上下中央揃えで表示させるというもの。
これを実現するためには、前述したline-heightとtext-alignを使用する。
例えばこんな感じ。
これを実現するためには、こう記述する。
親要素のtext-align: center; で左右を中央へ揃える。
そしてline-heightを親要素のheightと同じ値にする。
なぜ、line-heightを親要素と同じheightにすることで、上下が中央に揃うのか。
それは、行の高さを300pxに指定することで、文字サイズを除いた上下の余白が、均等に親要素いっぱいまで広がるから。
今まで「なんか上下揃える時はline-height使って、親要素いっぱいまで値を指定してるなあ」ぐらいに捉えていたけど、しっかりとどういう原理でその値を取っているのか、それを理解することができた。
これに限らず、コードにはそれぞれ必ず理由があるので、今後もできる限り理解するように努める。
（でも深追いはしない。）