数字输入框无法垂直居中求助（尝试vertical-align:middle无效）

下面提供几种可靠的实现方式，能让数字输入框和旁边的文字在容器内垂直居中：

方法1：Flex布局（推荐，现代浏览器友好） #

利用Flex布局的align-items: center属性，可以轻松实现子元素的垂直居中，无需额外调整行高或对齐细节：

span {
  display: flex;
  align-items: center;
  /* 可选：添加上下内边距优化整体间距 */
  padding: 4px 0;
}

HTML结构保持不变：

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

方法2：inline-block + vertical-align（兼容旧浏览器） #

如果需要适配旧版本浏览器（如IE10及以下），可以通过统一设置元素为inline-block并添加vertical-align: middle来实现：

span {
  display: inline-block;
}
span input, span {
  vertical-align: middle;
}

为什么你之前的代码无效？ #

vertical-align: middle仅对inline、inline-block或table-cell元素生效，且需要同时作用在需要对齐的双方（输入框和文本）上。你只给input单独设置了该属性，旁边的文本未同步配置，因此无法达到预期的居中效果。

内容的提问来源于stack exchange，提问作者user20675230