【CSS】英文を text-align:center するなら同時に text-wrap:balance も指定しておく

皆さん、こんにちは。

制作部の関です。

今回は「text-wrap:balance」についてのお話をします。

和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。

inline-size:fit-contentとmargin-inline:autoでセンタリングすることで、1行の場合は中央寄せ、複数行の場合は左寄せといった実装が可能となります。

h1 {
inline-size: fit-content;
margin-inline: auto;
}

See the Pen
text-wrap: balance by seki (@separth10)
on CodePen.

以上、制作部の関でした。