图片不对齐是因默认基线对齐造成底部空隙，1. 可通过设置vertical-align:middle/top/bottom调整；2. 结合margin微调位置；3. 推荐使用flex布局替代浮动，利用align-items实现稳定对齐。
当CSS浮动容器内的图片出现不对齐的情况，通常是因为图片默认的垂直对齐方式和行内元素的基线对齐机制导致的。虽然浮动本身会脱离文档流，但在同一行内的浮动元素仍可能受vertical-align影响，尤其是在父容器使用inline-block或display: table-cell等布局时。
理解图片不对齐的原因
图片作为替换元素，默认是行内元素（inline），其底部会与父容器的基线对齐，而基线与底线之间存在空隙，这就可能导致看起来“下移”或与其他元素不对齐。即使设置了浮动，这种视觉偏差依然可能存在，特别是当周围有文字或其他行内元素时。
使用 vertical-align 调整对齐
为了解决这个问题，可以显式设置 vertical-align 属性来控制图片的垂直对齐方式：
- vertical-align: middle; —— 让图片与父元素中线对齐
- vertical-align: top; —— 对齐顶部
- vertical-align: bottom; —— 确保对齐底部，常用于消除底部空白
注意：vertical-align 只对行内元素、表格单元格和 display: table-cell 元素有效。如果图片被设置为 float，建议同时将其父级或兄弟元素视为行内上下文，或改用 flex 布局更直观地控制对齐。
立即学习“前端免费学习笔记（深入）”；
结合 margin 微调位置
在某些情况下，仅靠 vertical-align 无法完全对齐，这时可通过 margin 进行像素级调整：
- 使用 margin-top 或 margin-bottom 手动修正垂直偏移
- 若图片与其他浮动元素并列，可统一设置相同的 margin 值保证一致性
- 避免使用负边距过大，以免影响响应式表现
例如：
img {float: left;
vertical-align: middle;
margin-top: 2px;
}
推荐替代方案：使用 Flex 布局
对于现代浏览器，建议用 Flex 替代浮动布局。flex 更容易实现对齐控制：
.container {display: flex;
align-items: center; /* 垂直居中 */
gap: 10px;
}
.container img {
flex: none;
}
这样无需处理 vertical-align 和 margin 的细节，布局更稳定。
基本上就这些。如果必须使用浮动，记得给图片加上 vertical-align: bottom 或 middle，并配合 margin 微调，能有效解决对齐问题。不过从长期维护角度，转向 Flex 是更优选择。
