事象
下記のような 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 値は適宜調整してください
}
}
サンプル(調整後)
スポンボタン未対応ブラウザの場合は以下を参照してください。
キャプチャ
