CSSでフォントサイズの違うテキストの高さを揃える2

コーディング
スポンサーリンク

CSSでフォントサイズの違うテキストの高さを揃える

このように文字の大きさがバラバラの文章をセンターラインで揃えたいと思います。
色んな揃え方があると思いますが一番簡単だと思うものを紹介します。

文字は全体をタグで囲んで、それぞれフォントサイズの違うものをspanタグなどで囲みます。

See the Pen
YzWJLaQ
by nzm (@nzm)
on CodePen.

 

flexにする

テキスト前回を囲んでるタグに

display:flex;
align-items: center;

で上下中央に揃えることができます。
justify-content: centerをつけて左右中央にするのも。

See the Pen
rNLqvra
by nzm (@nzm)
on CodePen.

これでフォントサイズがバラバラのテキストをセンターラインに合わせることできました。
真ん中に線を引いて確認するとこんな感じです。

フォントサイズの違うテキストの高さを揃える2

すごく簡単でおすすめの方法です。

コメント

タイトルとURLをコピーしました