2020.11.18

【簡単】letter-spacingの文字を中央寄せにする方法

 

上記の画像のように、letter-spacingを使って、文字の間隔を広げた際に、「文字が中央寄せにならない!微妙にズレてる、、。」といった経験がありませんか?

 

今回は現役WEBコーダーの僕が、「letter-spacingの文字のズレをなくし、文字を中央寄せにする方法」について紹介します。

それでは、早速解決していきましょう!

 

結論:text-indentを使えば、letter-spacingの文字のズレをなくして、中央寄せにすることが出来る

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

めっちゃ簡単です!

 

HTML・CSSで解説

実際に、HTML・CSSのコードで説明していきます!

 

完成形はこちら。

 

See the Pen GRqLEXX by ゆーじろー (@yujiron) on CodePen.dark

 

letter-spacingを使っていますが、しっかり文字が中央寄せになっており、左右に同じスペースが挿入されてズレが解消されていますね!

 

 

HTML

 

「btn」のclassの中に、「aタグ」が入っています。

 

CSS

 

「letter-spacing: 0.5em;」だけだと、最後の文字の右側にも余白がついてしまうので、左右に同じスペースが挿入されません。

つまり文字が中央寄せにならないです。

 

しかし、「text-indent: 0.5em;」を指定すると、

 

 

画像のように、左右に余白が均等に割り振られて、文字が中央寄せになります!

letter-spacingを使って、文字の間隔を広げた際に、「文字が中央寄せにならない!。微妙にズレてる、、。」といった問題を解決できました!

 

まとめ

letter-spacingを使って、文字の間隔を広げる際には、一緒に「text-indent」も一緒に指定しましょう!

そうすることで、letter-spacingを使っても、文字を中央寄せすることができます!

 

毎週水曜日にWEB制作においての技術ブログを更新しているので、是非ご覧ください〜。

 

CONTACT
RECRUIT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

私たちと働いていただける方を募集しています。