vertical-align 在 flex 容器中被规范强制设为 none 而失效，子元素对齐应使用 justify-content（主轴）和 align-items（交叉轴）控制。
vertical-align 在 flex 容器里被浏览器直接忽略
不是兼容性问题，也不是写法错误，而是 CSS 规范强制要求：只要父元素是 display: flex 或 display: inline-flex，其所有直接子元素就进入 Flex 格式化上下文（FFC），此时 vertical-align 的计算值被设为 none，DevTools 里会直接加删除线显示——它根本没参与布局计算。
flex 子元素的对齐由 align-items 和 justify-content 控制
Flex 布局用两根轴管理对齐：justify-content 管主轴（flex-direction 决定方向），align-items 管交叉轴。你原本想靠 vertical-align: middle 做的垂直居中，在 column 主轴下对应的是 justify-content: center，在 row 主轴下则是 align-items: center。混用 vertical-align 不仅无效，还会干扰调试判断。
常见误操作与对应修正
- 给
<i class="icon"></i>加vertical-align: middle→ 删掉，改用父容器设display: flex+align-items: center - 图标和文字在按钮里一高一低 → 检查是否漏了
line-height: 1或图标没设display: inline-block - DevTools 里看到
vertical-align被划掉还舍不得删 → 它已经不生效，留着只会掩盖真实问题（比如没设align-items或父容器没开 flex） - 试图用
vertical-align对齐 SVG 和文字 → SVG 默认是display: inline，基线位置不稳定；统一改用display: inline-block+ flex 对齐更可靠
真正需要 vertical-align 的场景其实很窄
vertical-align 只在行内流（inline formatting context）里起作用，典型场景是：<img> 和文字并排、<input> 和标签同行、<td> 内内容对齐。一旦父级开了 <code>display: flex，这些元素就脱离了行内流，vertical-align 失去作用对象。别强行把它拖进 flex 场景——就像不能用 float 清除 flex 项目的“浮动”，因为根本没浮动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
