我在html中輸入了一個數字。我想將里面的文本(即輸入內容)居中。我當然做了:

text-align: center;

哪種方式有效。問題是。當這些箭頭顯示時，文本現在居中。但是當箭頭消失時，文本停留在相同的位置，現在當然不再是中心了。

您可以讓微調按鈕(箭頭)始終顯示:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    opacity: 1;
}

或者您可以讓它們總是隱藏起來:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}

無論選擇哪一種，內容都將始終居中。

我發現在我的情況下使用width和padding-left屬性是可行的，因為我需要一個寬度為45px的相當小的盒子。

所以使用

padding-left:10px;
width:45px;
text-align:center;

工作得很好。

https://jsfiddle.net/faanvme3/

我用旋轉器上的相對/絕對位置達到了你描述的效果。 結果是，輸入的文本居中，同時在必要時保持頂部微調器的便利性。

input {
    text-align: center;
    position: relative;
  }
  input[type='number']::-webkit-inner-spin-button {
    position: absolute;
    width: 12.5%;
    height: 100%;
    top: 0;
    right: 0;
  }

在這個例子中，我假設微調器是輸入大小的1/8，但是這取決于你。

如果您使用引導程序，請執行以下操作:

使用css

input[type="number"] {
  text-align: center;
}

使用引導程序

<input type="number" class="text-center" min="1" max="99" name="quantity">