vertical-align: bottom 经常无效是因为需满足两个前提：单元格要有可参照高度（如 min-height）且内部不能含块级元素；推荐用 min-height + vertical-align 或 display: flex + justify-content: flex-end 实现可靠底部对齐。
vertical-align: bottom 为什么经常没反应
直接给 td 写 vertical-align: bottom 却看不到效果，不是代码写错了，而是它有两个硬性前提没满足：单元格必须有可参照的高度（不能全靠内容撑开），且内部不能是块级容器（比如嵌套了 div）。常见失效场景包括：
-
td没设height或min-height，浏览器按内容自动计算高度，“底”在哪根本不确定 - 单元格里写了
<div>文本</div>——vertical-align对块级子元素完全无效，只作用于行内内容或表格单元格自身渲染流 -
tr设了height，但td缺少line-height或padding，视觉上文字还是浮在中间
用 min-height + vertical-align 组合最稳妥
比起固定 height，min-height 更实用，尤其内容长度不一的时候。它既提供对齐基准，又不会截断长文本。推荐这样写：
td.bottom {
vertical-align: bottom;
min-height: 48px;
padding: 8px 12px;
}
注意点：
- 别用
height: 48px强制定高，否则多行文本会被隐藏或溢出 - 如果表格用了
border-collapse: collapse，边框可能侵占视觉空间，临时加outline: 1px solid red可看清真实单元格范围 -
vertical-align: bottom是对单元格内部内容生效，不是让整张表贴页面底部——别把margin: auto 0或position: absolute; bottom: 0错加到table标签上
遇到 div/img/button 等复杂内容必须用 flex
当单元格里有多个块级元素、图标+文字混排、或者需要响应式高度适配时，vertical-align 就不可靠了。此时唯一可控的方案是把 td 变成 Flex 容器：
立即学习“前端免费学习笔记（深入）”；
td.bottom-flex {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 60px;
}
关键细节：
-
justify-content: flex-end在column方向下 = 推内容到底部；margin-top: auto是等效替代，更轻量 - 不要同时写
vertical-align和display: flex，后者会完全覆盖前者 - 若该列需保持表格语义（如屏幕阅读器识别），只给特定
td加类，别全局改td的display - IE11 需补
-ms-display: flex和-ms-justify-content: flex-end，但基础对齐仍可用
valign="bottom" 已彻底失效，别再用
valign 属性在 Chrome/Firefox/Edge 90+ 中已被完全移除支持，写了也白写。调试时你会发现开发者工具的 “Computed” 或 “Styles” 面板里压根不显示它。ASP.NET Web Forms 的 HtmlTableCell.VAlign 这类服务端属性，也只是生成已失效的 HTML，最终照样被浏览器忽略。
真正起作用的只有 CSS 的 vertical-align（作用于 td/th）或 display: flex（作用于 td 自身）。而后者才是面对现代内容结构时，真正能兜住底的方案。
