input[type="number"] のテキストが中央揃えにならない
事象
下記のような width が狭い input[type="number"] に text-align: center; を指定しても中央揃えにならない。
<input class="input-number" type="number" min="0" max="9" />.input-number { text-align: center; min-width: 4rem; max-width: 100%;}サンプル(調整前)
原因
スピンボタン分、テキストの位置がずれてしまっている
対処法
inputにスピンボタン分のpaddingを設ける- スピンボタンの位置を
positionで指定する
.input-number { text-align: center; position: relative; padding: 0 1rem; // スピンボタン分の横padding 値は適宜調整してください
&::-webkit-outer-spin-button, &::-webkit-inner-spin-button { position: absolute; top: 50%; transform: translateY(-50%); right: 0; height: calc(100% - 0.2rem); // スピンボタンのheight 値は適宜調整してください }}