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

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

Answer 2

就这样：

使用CSS

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

使用引导程序

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

Answer 3

我发现在我的情况下玩宽度和填充左侧属性是因为我需要一个相当小的宽度为45px的盒子。

所以使用

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

工作得很好。

https://jsfiddle.net/faanvme3/

Answer 4

我使用微调器上的相对位置/绝对位置实现了您所描述的内容。 结果是您输入的文本居中，同时在必要时保持微调器的便利性。

    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，但这取决于你。