CSS letter-spacing でセンタリングが左にズレる時の対処方法

公開日 2021.11.11

by Takumi Hirashima

CSS letter-spacing でセンタリングが左にズレる時の対処方法を紹介します。
例えば、見出しに適用したプロパティ letter-spacing のせいで、右にスペースが生まれ、左にズレて見える時に便利な方法です。

letter-spacing でセンタリングが左にズレる時の対処方法

letter-spacing でセンタリングが左にズレる時には、text-indent を使用することでバランスを取ることができます。
例えば、letter-spacing を適用した箇所に text-indent で同じ値を設定してください。

.exsmple {

  letter-spacing: 1em;

  text-indent: 1em;

}

正確には、右にできたスペースを取り除くのではなく、左右に同じスペースを作ることでバランスを取ります。

CSS letter-spacing でセンタリングが左にズレる時の対処方法を紹介しました。