表单控件vertical-align不生效的根本原因是其作为行内替换元素，需配合display:inline-block才能生效；若父容器无明确line-height或font-size为0，对齐将异常。
表单控件为什么 vertical-align 不生效
直接给 <input> 或 <textarea></textarea> 设置 vertical-align: middle 有时没反应，不是写错了，而是它默认是行内级替换元素（replaced element），但它的对齐行为受父容器行高（line-height）和周围文本基线影响。如果父容器没有明确的行高、或旁边有文字/图标未对齐，vertical-align 就会“看起来无效”。
常见错误现象：<input type="text"> 和旁边的标签文字上下错位；<textarea></textarea> 底部悬空；<select></select> 和按钮高度不一致。
- 确保父容器是行内环境（如
<span></span>、<label></label>内嵌）或设置了display: inline-block - 避免在
flex或grid容器中依赖vertical-align—— 它会被忽略 - 若父元素
font-size为 0，会导致基线计算异常，vertical-align失效
textarea 垂直居中必须配 line-height
<textarea></textarea> 是替换元素，vertical-align 只作用于其**外边框的基线位置**，不影响内部滚动内容。要让它视觉上与旁边文字垂直居中，关键不是调 vertical-align 单独值，而是配合 line-height。
实操建议：
- 给
<textarea></textarea>的父容器（如<label></label>或<div>）设固定 <code>line-height，例如line-height: 2.4em - 再给
<textarea></textarea>设vertical-align: middle - 同时设
display: inline-block，否则vertical-align不起作用
示例：
label {
line-height: 2.4em;
}
label textarea {
display: inline-block;
vertical-align: middle;
height: 2em;
margin: 0;
}
input 和 select 对齐时优先用 middle 而非 top/bottom
在表单行内混排 <input>、<select></select>、<button></button> 时，vertical-align: top 或 bottom 容易导致整体高度参差。因为它们默认基线落在文字底部附近，top 会把整个控件顶部顶到行框顶部，反而让文字“下沉”。
更稳的做法是统一用 middle，并控制父容器 line-height 与控件高度匹配：
-
vertical-align: middle让控件中线对齐父元素小写字母 x 的中线，人眼感知最平衡 - 若仍偏高/偏低，微调父容器的
line-height（比如从1.5改为1.45）比硬调vertical-align数值更可靠 - 避免对
<input type="checkbox">或<input type="radio">使用%或length值 —— 渲染差异大，IE/Edge 表现尤其不稳定
inline-block + vertical-align 是表单对齐的最小可行组合
单纯靠 display: inline 的表单控件无法响应 vertical-align，必须显式设为 inline-block。这是最容易被忽略的前提条件。
典型漏写场景：
- 只写了
vertical-align: middle，但没写display: inline-block - 用了 CSS 重置（如 normalize.css）后，
input默认display可能被覆盖为inline，需手动还原 - 某些 UI 框架（如 Bootstrap）的表单类会覆盖
display，得用!important强制或提高选择器权重
一句话确认：只要你想用 vertical-align 控制表单控件对齐，display: inline-block 就不是可选项，是必选项。
