vertical-align: bottom 无效是因为它只对 inline、inline-block、table-cell 元素生效；块级元素如 <p>、<div> 忽略该属性；正确用法需确保图文同属行内流或改用 Flex/表格布局。
vertical-align: bottom 为什么经常没反应
因为 vertical-align 只对参与行内格式化上下文（IFC）的元素生效，比如 inline、inline-block、table-cell。默认 <img> 是 inline，但紧挨着它的 <p> 或 <div> 是块级元素，根本不受 vertical-align 影响。
常见错误写法：<p style="vertical-align: bottom">文字</p><img src="x.jpg">——父容器没设 display: table-cell，文字容器又是块级，这个 vertical-align 完全被忽略。
- 想用
vertical-align，必须让图文都在同一行内流里：把文字容器改成<span>或加display: inline-block -
vertical-align: bottom对齐的是当前行盒（line box）的底边，不是父容器底边；多行文字时只对最后一行起作用 - 行高（
line-height）异常或字体大小为 0 的容器里，行为更不可控
最稳方案：flex-direction: column + align-items: flex-end
要让“文字在上、图片在下”且整体底部对齐（比如卡片底部图标统一停在同一水平线），别碰 vertical-align，直接用 Flex 布局控制流向和对齐。
关键不是让图片“贴底”，而是让整个图文组合的交叉轴终点对齐到底部。
立即学习“前端免费学习笔记（深入）”；
- 给图文外层容器设
display: flex和flex-direction: column - 加
align-items: flex-end让子元素（文字、图片）右对齐；若要底部对齐，改用justify-content: flex-end（此时主轴是垂直方向） - 如果只要图片自己“沉到底”，更轻量的做法是给图片加
margin-top: auto，它会自动吸到底部，无需固定容器高度
表格单元格方案：display: table-cell + vertical-align: bottom
适合固定高度容器内的单行文字+图片底部对齐，兼容性好、语义清晰，不依赖 JS。
原理是把父容器模拟成表格单元格，vertical-align 在这里才真正起效。
- 父容器必须设明确高度（如
height: 120px）和display: table-cell - 同时设
vertical-align: bottom（作用于该单元格自身） - 内部文字用
<span>或纯文本即可，图片保持默认inline，都自动对齐到底部 - 注意：不要给子元素再设
vertical-align，容易冲突
绝对定位：bottom: 0 的前提条件
精准但代价高：文字/图片脱离文档流，父容器不再被内容撑开，必须手动控制高度或有其他内容占位。
- 父容器需先设
position: relative - 目标元素（如图片）设
position: absolute; bottom: 0; - 若需水平居中，补上
left: 50%; transform: translateX(-50%); - 多行文字底部对齐时，推荐用
display: flex+margin-top: auto替代，避免因高度不可预知导致错位
复杂点在于：所有方案都依赖容器是否“有高度”。没有显式高度或未被内容撑开的父容器，align-items: flex-end 和 vertical-align: bottom 都会失效——这时候得先理清高度来源，而不是调对齐属性。
