设置input的height后line-height失效文本对齐异常怎么解决？

问题根因 #

<input>属于浏览器内置的行内替换元素，默认的文本垂直对齐逻辑和普通块级元素不同，仅设置height、移除垂直padding后，line-height不会直接作用于输入框内的文本，就会出现文本偏上的对齐异常。另外你已经开启了box-sizing: border-box，这个配置刚好可以满足你「固定高度、不受border-width影响」的需求。

解决方案 #

推荐两种兼容性好、支持便捷改高度的方案：

方案1：Flex布局（最省心，优先推荐）

给input开启flex布局，强制内部文本垂直居中，后续调整高度只需改height属性值即可，不需要同步修改其他属性：

#input2 {
  height: 40px;
  /* 左右padding保留，上下padding显式设为0覆盖浏览器默认样式 */
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}

如果需要保持input的块级特性，把inline-flex换成flex即可。这个方案兼容所有现代浏览器，且不管字体大小、行高怎么调整，输入框文本都会自动居中。

方案2：line-height与height同值（兼容旧浏览器）

如果需要兼容IE等低版本浏览器，直接将line-height设置为和height完全相等即可：

#input2 {
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
}

注意要显式将垂直padding设为0，避免浏览器默认的上下padding挤压文本位置。

两种方案都可以保证输入框总高度固定为你设置的height值，修改border-width也不会改变总高度，完全匹配你的需求。

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