Html input center text

Question

I have an input number in html. I want to focus the text (i.e. the Input) that is inside. Of course, I did:

text-align: center;

what kind of work. The problem is that. The text is now centered when these arrows are shown. But when the arrows disappear, the text remains in the same position, which now, of course, is no longer the center.

Answer 1

You can always show arrows (arrows):

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

Or you can always hide them:

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

Using any option, the content will always be centered.

Answer 2

, padding-left , 45 .

,

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

.

https://jsfiddle.net/faanvme3/

Answer 3

This is simple:

CSS usage

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

Using bootstrap

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