vertical-align 对表单元素无效？先确认是否在行内上下文
直接说结论：vertical-align 只对 display: inline、inline-block、table-cell 元素生效，而默认的 <input>、<select></select>、<button></button> 虽然是替换元素，但浏览器通常按 inline 渲染——**前提是它们没被设成 block 或脱离了行内流**。
常见错误现象：给浮动的 <input> 加 vertical-align: middle 没反应，其实是它父容器用了 float，子元素被强制块级化或基线参考系丢失。
- 检查该表单元素的
display计算值（DevTools 的 Computed 面板），不是inline或inline-block就别指望vertical-align - 如果父容器是浮动布局，建议把表单元素显式设为
display: inline-block，再加vertical-align - 避免混用
float和vertical-align——浮动会让元素脱离文档流，基线对齐失去参照对象
input 和 label 基线不齐？别只调 input，label 也要管
典型场景：一个 <label></label> 文本 + 一个 <input type="text"> 并排显示，看起来总“矮半截”。这不是 input 自己的问题，而是 label 默认是 inline，其文本基线和 input 的图标/边框底边对不上。
-
vertical-align默认值是baseline，但不同浏览器对表单控件基线定义略有差异（比如 Chrome 把input基线定在 border 底边，Firefox 可能更靠下） - 统一做法：给两者都加
vertical-align: middle，且确保都是inline-block - 更稳妥的写法：
label, input { display: inline-block; vertical-align: middle; } - 注意：如果
label里有换行或设置了line-height，也会干扰基线位置，优先保持line-height: normal
select、textarea 和 input 的 vertical-align 行为有差异？是的，因为盒模型不同
<select></select> 和 <textarea></textarea> 是替换元素，但它们的默认 box-sizing 和内部渲染逻辑与 <input> 不同，导致同样设 vertical-align: middle，视觉对齐结果可能不一致。
立即学习“前端免费学习笔记（深入）”；
-
<input>（尤其是type="text"）高度主要由height+padding决定；<select></select>高度还受下拉箭头影响，某些浏览器会把它算进基线参考 -
<textarea></textarea>默认是display: block，必须手动设display: inline-block才能响应vertical-align - 兼容性提示：IE8–9 对
vertical-align在select上支持不稳定，建议加font-size: 100%统一字号基准 - 实测有效组合：
input, select, textarea { display: inline-block; vertical-align: middle; margin: 0; font-size: 14px; }
用 float 布局时对齐失效？换掉 float，改用 flex
这是最根本的解法。浮动本身不是为表单对齐设计的，硬凑 vertical-align 容易陷入“调一个动三个”的循环。
- 把父容器设为
display: flex，子元素自动垂直居中：.form-row { display: flex; align-items: center; gap: 8px; } - flex 不依赖基线，不关心
display类型，input、label、span全都能对齐 - 如果必须兼容 IE10+，可用
display: table-cell替代，但要注意父容器需配display: table，且宽度行为更难控 - 记住：只要看到
float: left+vertical-align同时出现，基本可以判定是过渡方案，该重构了
真正麻烦的不是 vertical-align 本身，而是它依赖的上下文太脆弱——一行代码改掉 display 或加个 float，整个对齐就崩。与其反复调试，不如让布局模型本身支持对齐语义。
