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

使用任一选项,内容将始终居中.