vertical-align: middle 是最直接有效的解法，需同时设置 label 和同级表单元素；flex 布局更可靠，应按组封装 form-item 并设 display: flex 与 align-items: center，避免全局 flex 或 line-height 伪方案。
label 默认对齐基线导致视觉错位
label 是行内元素，默认按 baseline 对齐，而 input、textarea 等表单控件的 baseline 位置和文字不一致，看起来 label 总是“偏高”或“偏低”。这不是 bug，是浏览器默认行为——label 按文本基线对齐，input 按自身内容基线对齐，两者天然不重合。
vertical-align: middle 是最直接有效的解法
给 label 和同级表单元素（如 input、select、textarea）统一加 vertical-align: middle，就能强制它们按中线对齐。这个属性对行内/行内块元素生效，且不需要改结构。
- 必须同时设置父容器无干扰
line-height（比如显式写line-height: normal） - 不能只设
label，否则input还是 baseline，依然错位 -
vertical-align: middle的参考线是父容器的 x-height 中间，不是绝对垂直中心，但视觉上足够对齐
flex 布局更适合现代表单结构
如果 label 和 input 是成组出现（比如每行一个 label + input），用 flex 包裹更可靠：
<div class="form-item"> <label>姓名</label> <input type="text"> </div>
对应 CSS：
.form-item {
display: flex;
align-items: center; /* 垂直居中 */
gap: 8px; /* 可选，替代 margin */
}
.form-item label {
flex-shrink: 0; /* 防止 label 被压缩 */
}
- 不用操心
vertical-align或line-height冲突 - 响应式友好，可轻松加
flex-direction: column切换堆叠方向 - 注意：不要把整个
form设为 flex，否则所有子项会水平排列；应按组封装
别踩 line-height = height 这个坑
有人试图给 label 父容器设 line-height 等于高度来“撑开”，这在单行纯文本时看似有效，但 label 里一旦有图标、sup、sub 或换行，就会失效甚至错乱。它本质是 hack，不是对齐方案。
-
line-height控制的是行框高度，不是元素定位 - 对
label自身设line-height无效（它是行内元素，不接受该值影响布局） - 真正起作用的是父容器的
line-height，但它只影响行内内容的纵向排布，无法解决跨元素基线差异
实际项目里最容易被忽略的，是忘记给所有同级表单控件同步设置 vertical-align，或者把 flex 容器设得太宽导致 label 被拉伸变形。对齐问题从来不是单点样式能解决的，它依赖一组元素之间的协同约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
