2024.06.18

文字の真ん中寄せや右寄せがずれてしまうときの解消法（text-align）

先日、文字を真ん中揃えにしたいのに、なぜかズレてしまうということがありました。

本日は、その原因と解決方法をご説明いたします！

文字の配置（text-align）について

文字は、text-alignで右揃え/左揃え/中央揃えなどを設定することができます。
コンテンツのタイトルなどによく使用しますね。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

この文字の配置指定と文字間（letter-spacing）指定を同時に行うと思ったとおりの表示にならないことがあります。

以下は、letter-spacing:1.5emを設定した例です。

See the Pen letter-spacing by spiqa design (@spiqa_design) on CodePen.

右揃えでは右側に余白が入ってしまって、中央揃えも中央から少しズレているように見えます。

文字を選択するとわかるのですが、letter-spacingを設定していることにより、右側に余白が入ってしまっているのです。

letter-spacingは、文字の右側に余白をあけて文字間を調整する仕様になっているためです。

1つ目は、左側にずれて見える分、全体を右側に寄せてしまう方法です。

背景色をつけているブロックの中に要素を作り（今回の場合はspan）、その要素の右側にletter-spacingの値と同じネガティブマージン（marginのマイナス値）を指定します。
以下の例のうち、背景がオレンジ色のものに設定しています。

See the Pen GRrKqMb by spiqa design (@spiqa_design) on CodePen.

今回は、letter-spacing:1.5emを指定していますので、margin-right:-1.5emを指定しています。ズレが解消されているのがお分かりかと思います。

検証ツールで確認するとspanで囲まれた要素がオレンジの背景から飛び出しているのがわかります。

ただ、左右のネガティブマージンは、意図せぬスクロールを発生させる可能性があるので、使用には十分ご注意ください！

文章が1行で、中央揃えのときのみという条件がありますが、この条件に当てはまる場合は、letter-spacingの値と同じ値のtext-indentを設置することでもズレを解消することができます。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

LPなどで使用する見出しは、1行で中央揃えというケースが多いのでこちらの方法でも良いかもしれないですね！

細かい点ですが、特にletter-spacingの値が大きいにはズレが気になりますので、このような箇所についても配慮してコーディングしていきたいですね。

関連記事はこちら

文字の真ん中寄せや右寄せがずれてしまうときの解消法（text-align）