css - 在 html 数字输入中居中文本

Question

我在 html 中输入了一个数字。我想将里面的文本(即输入)居中。我当然做了:

text-align: center;

哪种作品。问题是。当显示这些箭头时，文本现在居中。但是当箭头消失时，文本停留在相同的位置，现在当然不再是中心了。

Answer 1

您可以让微调按钮(箭头)始终显示:

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;
}

无论选择哪种方式，内容都将始终居中。