HTML数字输入中的中心文本

本文介绍了HTML数字输入中的中心文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个用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.