vertical-align: bottom最常用，因它让图片底边贴住行框底边，跳过baseline计算、不依赖字体度量，兼容性好且效果稳定；但仅在inline/inline-block且父容器非flex/grid时生效。
图片底部对齐文字，本质是解决 <img> 作为 inline 元素时默认按 baseline 对齐带来的底部空白问题。直接设 vertical-align: bottom 最快见效，但必须确认父容器不是 flex 布局——否则它完全不生效。
vertical-align: bottom 为什么最常用
它让 <img> 的底边直接贴住当前行框（line box）的底部，跳过了 baseline 计算，也不依赖字体大小或 descender 空间。比 text-bottom 稳定，比 middle 可预测。
- 错误现象：
<img src="icon.png">文字中文字总比图片“高一点”，下方有看不见的缝隙 - 实操建议：统一加
img { vertical-align: bottom; }，别只写在单个标签里 - 兼容性：IE8+ 支持，无性能开销，纯渲染层调整
- 注意：
vertical-align只对 inline 和 table-cell 元素有效，flex 或 grid 容器中设了也白设
flex 容器里图片怎么沉到底部
一旦父容器用了 display: flex，vertical-align 就彻底失效。这时候得靠 flex 自身的对齐逻辑，且必须明确主轴方向。
- 常见错误：给
<img>单独设align-self: flex-end，但父容器没设flex-direction: column，结果毫无反应 - 实操建议：若图片和文字并排（如图标+按钮文字），给父容器加
display: flex; align-items: flex-end; - 若图片在上、文字在下（如卡片图+标题），用
flex-direction: column; justify-content: flex-end;，再确保父容器有固定高度或min-height - 关键点：flex 的对齐目标是“容器的交叉轴”，不是“文字的底边”——所以必须先理清哪是主轴、哪是交叉轴
单图+单行文字紧贴底部的干净写法
如果只是想让一张图和一行字严格对齐底部（比如导航栏中的 logo + 文字），绕开 inline 流反而更可控。
- 错误做法：用
margin-bottom: -4px硬压，换字体或缩放就错位 - 实操建议：给
<img>加display: block，再用margin-top: auto配合父容器display: flex; flex-direction: column; - 替代方案：绝对定位 —— 父容器设
position: relative，<img>设position: absolute; bottom: 0;，文字用margin-bottom: 0避免撑开 - 注意：绝对定位会让图片脱离文档流，文字不会自动避开它，适合图文不交互的场景
最容易被忽略的是容器上下文——同一段 CSS 在 div 里有效，在 nav 或 header 里可能因继承的 display 值而失效。调试时优先检查父元素的 display 类型，而不是反复调 vertical-align 的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
