今回は、「letter spacingを指定したテキストが中央からずれてしまう時の対処法」について紹介します。

【CSS】letter spacingを指定したテキストが中央からずれてしまう時の対処法

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

letter spacingを指定していても、テキストが中央寄せになっていることが分かるでしょう。

それではコードを見ていきましょう。

HTML

<p class="button"><a href="">お問い合わせ</a></p>

CSS

.button {
  max-width: 400px;
  text-align: center;
  margin: 0 auto 50px;
  font-weight: bold;
  letter-spacing: 1em;
  text-indent: 1em;
}
 
.button a {
  border: 2px solid red;
  padding: 20px;
  display: block;
  color: #000;
  text-decoration: none;
}

letter spacingがかかったテキストを中央に寄せるには、letter spacingと同じ値を「text-indent」にも指定すればOKです！

letter spacingはテキストがずれやすいので、気をつけておきたいところですね。

まとめ

以上が、「letter spacingを指定したテキストが中央からずれてしまう時の対処法」でした。