必须给按钮显式设置display: flex才能启用align-items: center，因其默认为inline-block/block；图标文字一高一低是baseline对齐所致，需用flex切断该机制，并配合gap控制间距、避免line-height干扰。
按钮里图标和文字一高一低，用 align-items: center 没用？
不是 align-items: center 失效，而是按钮默认是 display: inline-block 或 display: block，没启用 Flex 布局。必须显式加 display: flex 才能激活交叉轴对齐逻辑。
常见错误现象：图标飘在顶部、文字沉底、间距忽大忽小——本质是行内元素的 vertical-align: baseline 在捣鬼，而你没切断它。
- 给
<button></button>直接设display: flex和align-items: center，别依赖子元素自己对齐 - 图标用
<svg></svg>或<img>即可，不需额外包裹<span></span>；若用字体图标（如<i class="icon-save"></i>），确保其font-size与文字一致，否则视觉仍偏移 - 避免在图标或文字上单独设
vertical-align，Flex 下它会被忽略或引发冲突
gap 和 margin 选哪个控制图标与文字间距？
gap 是更干净的选择，它只作用于 flex 项目之间，不影响容器内边距（padding）和子元素自身尺寸，语义明确且不会意外撑开高度。
用 margin-right 在图标上加间距看似简单，但容易导致：文字换行时错位、响应式缩小时间距崩坏、多状态（hover/disabled）下维护成本高。
- 推荐写法：
display: flex; align-items: center; gap: 8px; - 如果兼容性要求覆盖 IE11，
gap不支持，改用margin-inline-end: 8px（比margin-right更安全，自动适配 RTL） - 不要在文字元素上设
margin-left—— 违反“间距归属前一项”的 CSS 习惯，后续加新图标时易遗漏
导航菜单中图标+文字垂直偏移，line-height 是罪魁祸首？
是。当 <a></a> 是内联元素且设置了 line-height，再叠加 align-items: center，两者会争夺垂直定位权，结果就是菜单项看着“浮”或“压”在基准线上。
根本解法不是调 line-height 数值，而是让子元素脱离内联流。
- 给导航项中的
<a></a>加display: block或display: inline-flex（后者保留 flex 能力，适合内部再嵌图标） - 删掉或注释掉
line-height，改用padding-top/padding-bottom控制整体高度 - 确认父容器（如
<nav></nav>或<ul></ul>）有明确高度或最小高度（min-height），否则align-items: center缺少参照基准
为什么有时加了 display: flex 还是不对齐？
大概率是父容器被其他样式覆盖了，比如某个全局 CSS 规则写了 display: block !important，或者用了 float 导致文档流异常。
另一个隐蔽原因是图标或文字被设了 transform: translateY()、position: relative 偏移，或外层套了 display: grid 容器却忘了重置子项对齐方式。
- 用浏览器开发者工具检查最终计算出的
display值，确认是flex而非block - 临时加
display: flex !important验证是否被覆盖 - 如果父容器本身是
float或grid，需确保图标和文字处于同一级 flex 容器内，中间别插无关 wrapper
vertical-align 省半小时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
