答案：浮动布局中图片与文字对齐困难，可通过 inline-block 配合 vertical-align 实现精确对齐，如设置 vertical-align: middle 居中对齐，或使用 margin 微调位置；现代推荐采用 Flex 布局，通过 display: flex 和 align-items: center 简化垂直居中，提升开发效率与维护性。
浮动图片与文字对齐是前端布局中常见的问题，尤其在图文混排的场景下，图片和文字容易出现上下不对齐、错位等问题。虽然 float 能让文字环绕图片，但垂直对齐控制较弱。此时可以结合 vertical-align 和 margin 精细调整位置，提升排版效果。
理解 vertical-align 的作用场景
vertical-align 只对行内元素（inline）、行内块元素（inline-block）以及表格单元格（table-cell）生效，不能直接用于浮动元素。因此，如果想使用 vertical-align 控制对齐，需避免使用 float，改用 display: inline-block 布局。
- vertical-align: middle —— 内容居中对齐基线
- vertical-align: top —— 顶部对齐
- vertical-align: bottom —— 底部对齐
使用 margin 微调位置
即使设置了对齐方式，有时仍存在像素级偏差。这时可用 margin 手动调整上下或左右间距，特别适用于图标与文字紧邻的情况。
- 给图片添加
margin-top或margin-bottom调整垂直位置 - 使用负边距（如
margin-top: -4px）修正基线偏移 - 注意不同字体大小会影响行高，进而影响对齐效果
替代方案：使用 Flex 布局更简单
现代开发推荐使用 Flexbox 替代浮动布局。它天然支持垂直对齐，无需处理基线或手动加 margin。
立即学习“前端免费学习笔记（深入）”；
- 父容器设置
display: flex; align-items: center; - 子元素（图片和文字）自动垂直居中
- 兼容性良好，代码简洁，维护性强
基本上就这些。如果还在用 float 做图文排列，不妨尝试 inline-block + vertical-align 组合，或者直接升级到 Flex 布局，省去对齐烦恼。关键是根据场景选择合适的方法，避免死磕 margin 数值。
