【HTML,CSSの基礎】⑧文字を縦方向に中央揃えする方法

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。


プログラミングは楽しんでやることが大切です!


そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

文字を縦方向の中央に揃える方法

文字を縦方向の中央に揃えるには、要素の高さ(height)と行の高さ(line-height)を同じ値にすればOKです。コードを比較してみましょう。

黄色:何も指定していないもの。

ピンク:中央寄せしたもの。

このように、heightとline-heightの高さを同じ値にすれば「縦方向の中央揃え」ができます!Web制作では使う機会が多いので覚えておきましょう!


今日はここまでです。

これからも「プログラミング初心者向け」に簡単なコードをご紹介していきます。「Progateの復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう!よろしくお願いします。

この記事が気に入ったらサポートをしてみませんか?