問題
解決策
中央寄せでのletter-spacingへの対応
中央寄せにしたテキストの字間を広げるためにletter-spacingを設定したら、左に少しずれてしまった…。そんな経験はありますか?
今回はずれてしまった分を調整して解消する方法をご紹介します。
DEMOはこちら
調整前(中央寄せ+字間4pt)
調整前
調整後(中央寄せ+字間4pt+インデント4pt)
調整後
HTMLの構築
pタグを用意します。
- ※便宜上、クラス「centerspace」を設定しています。
<p class="centerspace">調整後</p>
CSSの構築
クラス「centerspace」に対し、CSSを設定します。
「text-align: center;」「letter-spacing: 4pt;」に続き、「text-indent: 4pt;」を設定します。
.centerspace{
letter-spacing: 4pt;
text-align: center;
text-indent: 4pt;
}
ポイント!
text-indentの値は、letter-spacingの値と同じに設定することで、ちょうど真ん中に調整することができます。
コメント