問題 × 解決策

中央寄せのテキストでletter-spacingを設定した時のずれの解消法

問題

中央寄せのテキストでletter-spacingを設定したら、左に少しずれてしまった。

解決策

「text-indent」で、letter-spacingに設定した分と同じ数値を設定する。

 

中央寄せでの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の値と同じに設定することで、ちょうど真ん中に調整することができます。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧