vertical-align: bottom 仅对 inline、inline-block、table-cell 等参与行内格式化上下文的元素生效；对块级元素无效，常见误用是错加在父容器上；推荐 table-cell + vertical-align、flex align-items 或 absolute 定位方案。
vertical-align: bottom 在 inline 元素上才生效
vertical-align: bottom 不是万能的“让文字贴底”工具，它只对 display 值为 inline、inline-block、table-cell 等参与行内格式化上下文（IFC）的元素起作用。直接给 <div> 或 <p> 这类块级元素设 vertical-align: bottom 完全无效。
常见误用场景：想让一个 <span> 文字在父容器底部对齐，却把 vertical-align 加在父容器上 —— 实际该加在 <span> 自身，并确保父容器是 table-cell 或启用行内布局。
用 display: table-cell + vertical-align: bottom 最直接
这是兼容性好、语义清晰、无需 JS 的纯 CSS 方案，适合固定高度容器内的单行文字底部对齐。
- 父容器设
display: table-cell和明确高度（如height: 100px） - 同时设
vertical-align: bottom（作用于该单元格自身） - 子元素保持默认
display: inline即可（如<span>或纯文本）
.container {
display: table-cell;
height: 120px;
vertical-align: bottom;
border: 1px solid #ccc;
}Flexbox 中 align-items: flex-end 更现代但要注意方向
如果父容器是 display: flex，align-items: flex-end 才是让子元素（包括文字）在交叉轴末端对齐的正确方式 —— 注意：这取决于 flex-direction：
立即学习“前端免费学习笔记（深入）”；
- 默认
flex-direction: row→ 交叉轴是垂直方向 →align-items: flex-end= 底部对齐 - 若改成
column，交叉轴变成水平方向，此时align-items: flex-end就是右对齐了 - 文字本身不需要额外设置
vertical-align
.container {
display: flex;
height: 120px;
align-items: flex-end;
justify-content: center; /* 可选：水平居中 */
}absolute 定位 + bottom: 0 是最可控但需脱离文档流
当容器高度固定、且允许文字脱离正常流时，绝对定位是最精准的控制方式，尤其适合多行文字或需要像素级偏移的场景。
- 父容器需设
position: relative - 文字容器（如
<div>或<p>）设position: absolute; bottom: 0; - 若要居中，补上
left: 50%; transform: translateX(-50%); - 注意：该文字不再参与父容器高度计算，父容器需自行设定高度或有其他内容撑开
.container {
position: relative;
height: 120px;
border: 1px solid #ccc;
}
.text {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}真正容易被忽略的是：vertical-align 的行为始终依赖上下文 —— 行高、父容器的字体大小、是否设置了 line-height，都会影响最终视觉位置。调试时别只盯着目标元素，得看它所在的那一整行（line box）里还有谁。
