Center text in html number input

问题:

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.

回答1:

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.

回答2:

Just this:

Using css

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

Using bootstrap

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

回答3:

I found that playing around with the width and padding-left properties worked in my situation because I required a fairly small box of width 45px.

So using

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

worked nicely.

https://jsfiddle.net/faanvme3/