vertical-align: middle常失效，因其仅对inline/inline-block等元素生效，且对齐的是行框中线而非视觉中心，受line-height、字体度量及图标内联样式干扰；推荐改用display: inline-flex + align-items: center。
为什么 vertical-align: middle 对图标+文字经常失效
因为 vertical-align 只对 display 为 inline、inline-block、inline-table 或 table-cell 的元素生效。直接给 <img> 或 <span></span> 写 vertical-align: middle，但没改 display，浏览器就当它不存在——图标底部留白、文字“吊”在基线上，就是典型表现。
更麻烦的是，它的“中”指整行的行框中线（line box center），不是容器高度中点，受父级 font-size 和 line-height 牵连，调试起来像猜谜。
- 图标字体（如 Material Symbols）上升部/下降部高度不统一，
vertical-align没法稳定锚定视觉中心 - 混用
float或position: absolute子项会脱离行内流，vertical-align完全无效 - IE10/11 中若子元素设了
min-height，可能被 flex 压缩，需额外加flex-shrink: 0
display: flex + align-items: center 怎么写才可靠
把图标和文字包进同一个父容器，设为 flex 容器，交叉轴对齐就稳了。不用管行高、字体度量，也不依赖外层样式干扰。
示例结构：
<div class="icon-text"> <svg class="icon"></svg><span>保存</span> </div>
CSS 关键部分：
.icon-text { display: flex; align-items: center; gap: 8px; white-space: nowrap; }-
gap替代margin控制间距，语义清晰且不影响对齐逻辑 -
white-space: nowrap防容器窄时文字换行破坏单行对齐 - 如果父容器本身有
float或display: block，要确认没覆盖掉display: flex（可用display: flex !important临时验证）
图标和文字都是行内元素，要不要额外包裹？
不需要。原生 <img>、<svg></svg>、<i></i> 和 <span></span> 都能直接作为 flex 项目，加多余 <div> 反而增加 DOM 层级、影响可访问性。
<p>但注意两点：</p>
<ul>
<li>如果图标是字体图标（如 <code><i class="material-icons">save</i>），确保其 font-size 和文字一致，否则视觉上仍会偏高/偏低
align-items: center 是让整个 <span></span> 垂直居中，不是每行单独居中——这是预期行为，不是 bug兼容性和响应式怎么处理
Flexbox 在 IE11 中基本可用（≥ IE10），但要注意：
- IE11 不支持
gap，需回退用margin或伪元素模拟 - 若需小屏换行，加
flex-wrap: wrap，但此时align-items: center仍作用于每行，不是整体容器 - 避免在 flex 容器里混用
float元素——它们会脱离 flex 流，不受align-items控制
真正容易被忽略的，是父容器的 height 是否受内容撑开。如果父容器本身高度塌陷（比如只含浮动子项），flex 布局也救不了——先解决父容器高度问题，再谈对齐。
