letter-spacing と text-indent で等間隔で中央揃え
こんにちは、ぐっちと申します。
今回は前回書いたドロップダウンリスト作成中に、リストの文字を等間隔で表示しようとした時の話をしようと思います。
編集・削除という文字を下図の様に、要素の中に等間隔で配置したかったので
とりあえず text-align: center; を当てた場合はこんな感じになる
半角スペースを入れてみる
間が狭いので全角スペースにしてみる
やっぱり等間隔にはならないので、別の方法を考える事に……
そもそもスペースで調節するとか邪道な気がします。微調整出来ませんし……
調べるとテキストの文字間を指定するCSS「letter-spacing」があるみたいなので早速当ててみると……
想像していたのと違う……
どうやらこれは文字の後ろに隙間が適応されている為で
「編□集□」こんな感じになっている様です。
もうちょっと調べると「text-indent」という文章の一行目のインデント幅を指定するものがある事が分かり、「letter-spacing」と同じ値を指定して無事等間隔になりました。
今回は2文字でしたが、文字数が多い程有用なやり方だと思いました。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています(@Yamaguc45844169)