vertical-align 在表单中常失效，因它仅对 inline、table-cell 和部分替换元素有效；label 默认为 block，input 若设为 display: block 或父容器为 flex/grid 则脱离行内流，导致 vertical-align 无效。
vertical-align 在表单元素里为什么经常失效
因为 vertical-align 只对 inline 元素、table-cell 和某些替换元素（如 input、select）生效，但默认情况下，label 是 block，input 虽是替换元素却常被设成 display: block 或受父容器影响脱离行内流——这时候 vertical-align 就完全没反应。
- 检查元素是否还在同一行内上下文：用
display: inline-block显式保留在行内流中 - 避免父容器用了
display: flex或display: grid，它们会无视vertical-align - Chrome 和 Safari 对
input[type="checkbox"]的基线定位不一致，Firefox 更“靠上”，这是最常出对齐偏差的场景
input 和 label 垂直对齐的最小可靠写法
不用猜浏览器行为，直接用 display: inline-block + vertical-align: middle 锁死关系。注意：必须同时设置两者，且不能只给 input 加，label 也得参与对齐。
-
label加display: inline-block; vertical-align: middle; -
input加display: inline-block; vertical-align: middle;（尤其type="checkbox"和type="radio"） - 如果 label 内有文字，建议加
line-height: 1.2防止字体渲染差异拉高基线 - 不要依赖
margin-top或padding-top微调——换字体或缩放页面就崩
label, input { display: inline-block; vertical-align: middle; }
Firefox 下 checkbox 对齐偏高的真实原因
Firefox 把 input[type="checkbox"] 渲染为带固定内边距的控件，其 baseline 实际落在控件底部往上约 2px 处，而 Chrome/Safari 更贴近视觉中心。这不是 bug，是各引擎对替换元素 baseline 定义不同。
- 加
vertical-align: top或vertical-align: bottom能绕过 baseline 差异，但可能破坏和其他文字的对齐节奏 - 更稳的做法是统一用
vertical-align: middle+ 给input补margin-top: -1px（仅 Firefox 用@supports (-moz-appearance: none)包裹） - 千万别用
transform: translateY()模拟对齐——表单焦点 outline 会错位，且影响可访问性
移动端 iOS Safari 的额外陷阱
iOS Safari 对 input[type="text"] 和 textarea 的行高计算更激进，哪怕设了 line-height: 1，内部 padding 仍可能撑高容器，导致和旁边 icon 或 button 不对齐。
- 强制重置
input的盒模型：box-sizing: border-box; height: 1.5em; - 配合
font-size: 100%防止继承父级缩放字体放大输入框 - 如果用
flex布局替代inline-block，记得加align-items: center，但要确认所有子元素没有margin干扰基线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
