テキストの上下中央揃え-line-heightの仕組みテキストの上下中央揃え-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を使用する。これを実現するためには、こう記述する。line-heightを親要素のheightと同じ値にする。line-heightを親要素と同じheightにすることで、上下が中央に揃うのか。それは、行の高さを300pxに指定することで、文字サイズを除いた上下の余白が、均等に親要素いっぱいまで広がるから。今まで「なんか上下揃える時はline-height使って、親要素いっぱいまで値を指定してるなあ」ぐらいに捉えていたけど、しっかりとどういう原理でその値を取っているのか、それを理解することができた。これに限らず、コードにはそれぞれ必ず理由があるので、今後もできる限り理解するように努める。(でも深追いはしない。コメントをキャンセルメールアドレスが公開されることはありません。PHP2019年10月18日22300viewわかっているようでわからない、PHPのFETCHを解説!PHP2019年10月4日6262viewPHPのデータベース接続ー呪文に見えるコードの正体を追う【初心者向け】PHP2019年10月11日5418viewちゃんと分かってる?ーPHPでとっても大事な$_POSTを理解しよう!プログラミング2019年9月27日4308viewVSCodeは初心者にこそおすすめ!-拡張機能で勉強効率を3倍にする-プログラミング2019年7月26日3547view30代・未経験・ウェブマーケティング業界への転職は失敗した。最近の投稿Laravel+Vueでゼロからサービスを作りました。takablog.ホームシェアTOPへ。