按钮文字与图标对不齐可通过line-height或flex布局解决。1. 使用line-height时，设其值等于固定高度，配合vertical-align: middle微调图标对齐；2. 采用flex布局，通过align-items: center实现精准垂直居中，支持复杂结构且适配性强，推荐优先使用。
按钮中的文字和图标对不齐是常见的CSS布局问题，尤其在使用行内元素或不同字体大小时更容易出现。解决这类问题的关键是控制垂直对齐方式，常用方法包括 line-height 和 flex布局，它们更灵活、兼容性好且易于维护。
使用 line-height 对齐文字与图标
当按钮高度固定时，设置 line-height 等于按钮高度，可以让单行文字和内联图标在垂直方向居中。
说明：图标如果也是行内元素（如使用 iconfont 或 img 内嵌），line-height 会作用于整个行盒，实现视觉居中。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.btn {
height: 40px;
line-height: 40px; /* 与高度一致 */
font-size: 16px;
padding: 0 16px;
display: inline-block;
}
.btn i {
font-size: 18px;
vertical-align: middle; /* 微调对齐 */
}
注意： 图标字体建议加上 vertical-align: middle 避免基线错位。
使用 Flex 布局精准对齐
Flex 是现代布局首选，能自动处理对齐问题，不受字体或图标大小影响。
优势：
- 无需计算 line-height
- 支持多行内容、复杂结构
- 自动垂直居中子元素
示例代码：
立即学习“前端免费学习笔记（深入）”；
.btn {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（可选） */
height: 40px;
gap: 8px; /* 图标与文字间距 */
padding: 0 16px;
font-size: 16px;
}
.btn i {
font-size: 18px;
}
若图标是图片：
.btn img {
width: 16px;
height: 16px;
}
常见问题与建议
某些情况下即使用了 flex 或 line-height 仍显示偏移，可能是以下原因：
- 字体基线差异：不同字体 baseline 不一致，用 flex 的 align-items 能更好控制
- 图标本身有空白：SVG 或图片自带 padding，建议检查导出设置或重设样式
- box-sizing 影响尺寸：确保按钮的 width/height 计算一致
推荐优先使用 flex 布局，结构清晰，适配性强。line-height 方法适合简单、固定高度的按钮，代码轻量。
基本上就这些，掌握这两个方法，大多数对齐问题都能高效解决。
