使用vertical-align实现文本与图片垂直对齐需确保元素为inline或inline-block类型，常用middle值使内容居中对齐；推荐flex布局通过align-items:center实现更稳定精确的垂直居中效果。
HTML中实现文本与图片的垂直对齐，关键在于使用CSS的 vertical-align 属性。这个属性控制行内元素或表格单元格内容的垂直对齐方式，常用于调整文字和图片在一行中的相对位置。
理解 vertical-align 的作用范围
注意：vertical-align 只对行内元素（inline）、行内块元素（inline-block）和表格单元格（table-cell）起作用。如果图片或文本被设置为块级元素（如 div 默认状态），该属性不会生效。
常见做法是将 img 和 span 等文本容器都设为 inline 或 inline-block：
<span>文本</span><img src="example.jpg" alt="示例图片">
span, img {
display: inline-block;
vertical-align: middle;
}
常用对齐方式及效果说明
根据视觉需求选择合适的对齐值：
立即学习“前端免费学习笔记（深入）”；
- vertical-align: baseline — 默认值，文本基线与图片底部对齐（常见但可能看起来偏上）
- vertical-align: middle — 文本中线与图片中线对齐，适合多数场景下的“居中”效果
- vertical-align: top — 顶部对齐，文本与图片顶端平齐
- vertical-align: bottom — 底部对齐，通常用于不需要特殊对齐的情况
精准控制：结合 line-height 或 padding 调整
当父容器高度固定时，可通过设置 line-height 与容器高度一致，使单行文本垂直居中，再配合 vertical-align 调整图片：
.container {
height: 40px;
line-height: 40px;
}
.container img {
vertical-align: middle;
}
若需要更精细的位置微调，可使用 margin-top 或 transform: translateY()：
img {
vertical-align: middle;
transform: translateY(-2px);
}
使用 Flex 布局替代传统方法（推荐现代方案）
对于复杂或响应式布局，建议用 Flexbox 实现更稳定的垂直对齐：
.flex-align {
display: flex;
align-items: center; /* 垂直居中 */
gap: 8px;
}
<div class="flex-align">
<span>文本</span>
<img src="example.jpg" alt="图片">
</div>
Flex 方案无需关心基线问题，兼容性良好，更适合现代网页开发。
基本上就这些。用 vertical-align: middle 配合 display: inline-block 是最基础有效的方法，遇到对不齐时检查元素是否为行内类型。需要更高精度或复杂布局时，转向 Flex 更省心。
