input number,It cannot be centered vertically-CodePudding

Center the numeric input box vertically in the content area

input {
  vertical-align:middle 
}

<p>
   <span>
     <input type="number" id="number"  value="8" min="1" max="20">
     密码位数
   </span>
</p>

To no avail

CodePudding user response：

Is this the answer you're looking for? The numeric value will not be completely centered without a padding left and position relative because of the up and down increment arrows, just for your reference.

input[type="number"] {
    text-align: center;
    position: relative;
    padding-left: 15px;
    }

<input type="number" id="number"  value="8"  min="1" max="20">
     <span>密码位数</span>

CodePudding user response：

just add display:flex to the span

span {
display:flex;
}

<p>
   <span>
     <input type="number" id="number"  value="8" min="1" max="20">
     密码位数
   </span>
</p>