优先使用vertical-align和现代布局替代float，通过line-height或table-cell实现文字与图片的垂直居中对齐效果。
在网页布局中，浮动（float）常用于实现图文混排或元素并排显示。当图片与文字一同使用浮动时，常会出现文字与图片未垂直居中的问题。通过合理运用 line-height 与 vertical-align 属性，可以有效解决这类对齐难题。
理解浮动与行高对文字的影响
当一个块级元素（如图片）设置为 float:left，它会脱离正常文档流，而旁边的文本内容则会围绕其排列。此时，文字的垂直对齐依赖于其所在的行框（line box）和父容器的 line-height。
如果父容器设置了固定高度和 line-height，而内部文字只有一行，那么可以通过调整 line-height 等于容器高度，实现单行文字的垂直居中。
注意：line-height 只对单行内联内容有效，多行文本需采用其他方式。 示例代码：假设有一个高度为40px的容器，希望其中的文字垂直居中显示：
立即学习“前端免费学习笔记（深入）”；
<div style="height: 40px; line-height: 40px;"> <img src="icon.png" style="float: left; height: 30px; margin: 5px;"> <span>文字内容</span> </div>
此时，虽然 line-height 设为40px能让文字垂直居中，但浮动的图片可能导致行框高度异常，文字仍可能偏移。
使用 vertical-align 调整内联元素对齐
vertical-align 用于设置内联元素或表格单元格内容的垂直对齐方式。在非浮动场景下，将图片与文字都设为 inline-block，并使用 vertical-align: middle，可实现自然对齐。
推荐方案：避免使用 float，改用 inline-block + vertical-align：
<div style="line-height: 40px;"> <img src="icon.png" style="display: inline-block; height: 30px; vertical-align: middle;"> <span style="display: inline-block; vertical-align: middle;">文字内容</span> </div>
这种方式不依赖浮动，更易于控制对齐效果，且兼容性良好。
浮动场景下的对齐修复技巧
若必须使用 float，可通过以下方式优化对齐：
- 确保文字所在行的 line-height 与容器高度一致
- 为浮动元素设置 margin-top 调整垂直位置
- 使用伪元素清除浮动的同时保留行高结构
- 将文字包裹在 display: table-cell 的元素中，并设置 vertical-align: middle
例如，使用 table-cell 方案实现真正垂直居中：
<div style="height: 40px; display: table;"> <img src="icon.png" style="float: left; height: 30px; margin: 5px 10px 0 0;"> <span style="display: table-cell; vertical-align: middle;">文字内容</span> </div>
基本上就这些。关键是根据布局需求选择合适的方法：能不用 float 就尽量避免，优先使用 vertical-align 与现代布局方式（如 Flexbox），但在旧项目维护中，line-height 配合 float 仍是实用技巧。
