使用 align-items: baseline 结合 media queries 可实现文字与图标在不同屏幕下的精准对齐。1. 通过 Flex 布局设置 baseline 对齐，使不同字号的文字与图标底部对齐；2. 在大屏使用 flex-direction: row 保持横向排列；3. 小屏通过 @media (max-width: 768px) 切换为 column 布局并居中对齐；4. 注意 img 元素需设 vertical-align: baseline，图标字体用 line-height: 1 统一基准；5. 兼容性方面需在 Safari 等浏览器测试。该方案简单有效，确保响应式下视觉一致性。
在响应式网页设计中，文字与图标的对齐看似简单，实际在不同屏幕尺寸下容易错位。通过 align-items: baseline 与 media queries 的结合使用，可以实现跨设备的一致视觉效果。
使用 align-items: baseline 实现基线对齐
图标和文字通常位于同一行，但字体大小、图标高度不一致时，容易出现上下不对齐的问题。baseline 是最自然的对齐方式，它让文字与图标底部对齐，符合排版习惯。
说明：- 将父容器设为 Flex 布局，并设置 align-items: baseline。
- 文字元素（如 span）和图标（如 i 或 img）会基于文本基线对齐。
- 适用于图标字体（如 Font Awesome）或 SVG 图标内嵌文本场景。
示例代码：
.container {
display: flex;
align-items: baseline;
}
.icon {
font-size: 16px;
}
.text {
font-size: 14px;
}
这样即使字号不同，文字和图标也能保持底部对齐，视觉更协调。
立即学习“前端免费学习笔记（深入）”；
结合 Media Queries 适配不同屏幕
在小屏幕上，图标和文字可能需要调整布局以节省空间，例如从横向排列变为纵向堆叠，此时需用 media queries 控制样式变化。
建议做法：
- 在大屏上使用 flex-direction: row，配合 baseline 对齐。
- 在小屏上切换为 flex-direction: column，居中对齐，避免基线对齐失效。
- 调整图标和文字的字号，确保可读性。
响应式示例：
.container {
display: flex;
align-items: baseline;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
text-align: center;
}
.text {
margin-top: 4px;
}
}
这样在移动端自动转为垂直布局，提升可读性和点击区域。
注意事项与优化技巧
使用 baseline 对齐时，注意以下细节：
- 图标若为图片（img），需设置 vertical-align: baseline，否则默认按 middle 对齐。
- 某些图标字体自带上下边距，可用 line-height: 1 统一基准。
- 在 Safari 等浏览器中测试，确保 baseline 表现一致。
基本上就这些。合理使用 align-items: baseline 和 media queries，能让文字与图标在各种设备上都保持专业对齐效果，不复杂但容易忽略。
