vertical-align 失效时先确认 display 类型；它仅对 inline、inline-block、table-cell 生效，若元素为 block、flex、float 或 absolute 则失效，应检查 computed display 并设为 inline-block。
vertical-align 失效时先确认 display 类型
直接给 input 和 img 写 vertical-align: middle 却没反应？大概率是其中一个元素被设成了 display: block 或 flex ——vertical-align 只对 inline、inline-block、table-cell 生效。
常见踩坑点：
-
img被父容器设了display: flex，它就不再是行内上下文，vertical-align自动忽略 -
input加了width: 100%后在某些布局中触发块级行为，尤其嵌套在div里没设display: inline-block - 用了
float或position: absolute，同样脱离行内流，vertical-align不起作用
实操建议：用浏览器开发者工具检查两个元素的 computed display 值；若非 inline 或 inline-block，加一句 display: inline-block 再试。
避免 align="absmiddle" 这类废弃属性
HTML5 已移除 align 属性（如 align="absmiddle"、align="middle"），虽然部分浏览器仍兼容，但会触发 HTML 验证警告，且在严格模式下可能失效。
替代方案明确且统一：
- 所有对齐逻辑收归 CSS，例如：
img { vertical-align: middle; } - 若需兼容老项目中的内联
align，优先批量替换为 class + CSS 规则，而非保留混用 - 注意
vertical-align的基准线依赖于行高（line-height），父容器若没设line-height，默认值可能造成微小偏移
表格内对齐优先用 thead/tbody + scope
表格中单元格内容错位，不是靠 text-align 或 vertical-align 硬调，而是结构本身没立住。
语义化写法能自然改善对齐稳定性：
- 必须用
thead包裹表头行，tbody包裹数据行，避免浏览器自行补全导致渲染不一致 -
th标签加上scope="col"或scope="row"，不仅提升可访问性，也让 CSS 选择器更精准（比如th[scope="col"] { text-align: center; }） - 避免用
td冒充表头，否则vertical-align: bottom在某些浏览器中对td的解析不如th可靠
响应式场景下慎用 fixed line-height
在移动端或字体缩放时，固定 line-height: 20px 容易让 vertical-align: middle 失准——因为 middle 是按“行框中线”对齐，而行框高度由 line-height 和字体实际尺寸共同决定。
更鲁棒的做法：
- 用相对单位：
line-height: 1.4或line-height: 1.5em - 对需要严格对齐的组合（如图标+文字按钮），改用
display: flex; align-items: center，它不依赖行高计算 - 如果必须用
vertical-align，可在父容器设font-size: 0消除空白字符占位影响，子元素再重设字体大小
真正难处理的不是怎么对齐，而是对齐之后在不同字号、DPI、缩放比例下是否还稳定。别只盯着一个 vertical-align 值调来调去，先看它的上下文是否干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
