「letter-spacing」を指定した時の、中央揃え・右揃えのズレを無くす方法

 

 Web技術

文字の間隔を調整する「letter-spacing」を指定したとき、
最後の文字の後ろにもスペースが挿入されてしまいます。

テキストを左揃えにしているときは特に気になりませんが
「text-align:center;」や「text-align:right;」を設定していると、
最後の文字のスペースが原因で位置がズレてしまいます。

作成したボタンを元に対処方法を書いていきます。


●中央揃えボタン


●右寄せボタン

中央揃え(text-align: center;)の場合

通常(letter-spacing指定なし)

問題なく中央揃えされています。

letter-spacing指定あり

最後の文字のスペース分、中央よりも左にズレてしまいます。

対処方法

「text-indent」を使用して右側にもスペースを作ります。

「text-indent」と「letter-spacing」を同じ数値で設定すると
左右に同じスペースが挿入されズレが解消されます。

中央に揃いました。

右寄せ(text-align: right;)の場合

通常(letter-spacing指定なし)のボタンでは問題なく揃っていますが
letter-spacing指定ありのボタンでは
最後の文字のスペース分、右端に綺麗に揃っておりません。

対処方法

「margin-right」にネガティブマージンを
「letter-spacing」と同じ数値で指定することで、文字列の最後の余白をキャンセルさせます。

この方法はブロックレベル要素には使えませんのでインライン要素に使用します。
今回はspanタグを追加し指定しています。

右端に揃いました。


▼参考にさせていただきました。ありがとうございました。

 この記事の投稿者

アバター画像

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

ページ最上部へ