HTML数字输入中的中心文本 [英] Center text in html number input

问题描述

我有一个用html输入的数字。我想将内部的文本（即输入）居中。我当然做到了：

I have a number input in html. I want to center the text (i.e. the input) that is inside. I of course did:

text-align: center;

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

which sort of works. The problem is though. The text is now centered when those arrows are shown. But when the arrows disappear, the text stays at the same position which now of course isn't the center anymore.

推荐答案

您可以使微调按钮（箭头）始终显示：

You can have the spinner buttons (arrows) always show:

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

或者您可以始终隐藏它们：

Or you can have them always hidden:

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

使用任一选项，内容始终居中。

With either option, the contents will always be centred.

这篇关于HTML数字输入中的中心文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！