啊！图标和文字总是不对齐，怎么办？

等..…. 你是不是时常遇到当前这个问题：按钮上图标和文字有时候上下不齐，有时候间距乱七八糟的？今天我就来教较大家一个简洁方法——用gap属性来解决当前这个问题。

先来看要明白：哪些是flex布局

别纠结... flex布局就是像折纸一样把元素排列成一行或一列。你能够想象成： - 把元素当作较小人 - 把flex容器当作操场 - 用align-items让较小人站得有序

gap属性到底是哪些？

gap属性就是两个较小人之间的可靠距离！就 PPT你。 像较小学老师要求同学们排队时保持一米线一样。

上面代码中， 图标和文字之间会自动保持20像素的距离，而且左右都对齐！

注意！注意！这一些错误别踩！

1. 把图标和文字放在一个盒子里这样gap就不起作用了！ ❌ 错误做法： html
   📌点击这里
   ✅ 正确做法：
   📌 点击这里

2. **用margin代替gap**：这样会引起边缘更多出空白！ 3. **遗忘设置align-items**：这样图标有可能会飘起来！ ## 调整垂直对齐问题 有时候即采用了gap，图标还是不在中间。这时需要加上align-items： 记住：align-items:center就像魔法棒，让全部元素都良好良好坐在椅子上！

IE浏览器怎么办？

啊呀呀，IE浏览器不支持gap属性！不过不用怕： 1. 用margin代替 2. 告诉老板说当前没人用IE了

常见问题解答

**Q：为哪些我的gap没生效？** A：有可能这是因为： - 没有设置display:flex - 元素不是直接子元素 - 浏览器太老了 **Q：怎样控制垂直方向的间距？** A：采用flex-direction:column+row-gap: **Q：SVG图标总是不对齐怎么办？** A：给SVG设置vertical-align: middle： css .icon { vertical-align: middle; }

最佳实践提议

优先采用flex布局+gap组合拳 给父容器设置line-height保证基线对 我傻了。 齐 用em单位适配不同字体较大较小 测试时更多切换浏览器窗口较大较小看看响应式效果

记住这一些技巧，你就能轻巧松解决99%的图标文字对齐问题啦！

---