在HTML5页面开发中，让一段文字稳定地靠容器底部对齐是常见需求，例如卡片描述贴底、表格内容下沉等。CSS里的vertical-align:bottom就是专门处理这类行内或单元格对齐的属性，理解它的作用范围才能用对地方。
vertical-align:bottom适用于哪些场景
vertical-align属性只对内联元素（如span、img）和表格单元格（td、th）生效，对块级盒子本身无效。因此想让文字靠底，要么把文字放在行内标签里，要么使用表格结构。
行内元素中的用法
当父元素设定了固定高度，且内部有行内内容时，给需要贴底的行内元素加上vertical-align:bottom即可。
<div style="height:120px; border:1px solid #ccc;"> <span style="vertical-align:bottom; display:inline-block;">靠底部文字</span> </div>
表格单元格中的用法
在table布局中，直接对td设置vertical-align:bottom，单元格里的文字就会沉到最下方。
<table style="height:150px; border:1px solid #999;">
<tr>
<td style="vertical-align:bottom; border:1px solid #eee;">表格内底部文字</td>
</tr>
</table>
与flex布局的对比
如果外层是flex容器，用align-items:flex-end也能贴底，但那是针对flex子项的，和vertical-align:bottom不是同一套机制。
| 方案 | 适用对象 | 特点 |
|---|---|---|
| vertical-align:bottom | 行内元素、td | 传统排版属性，兼容性好 |
| flex-end | flex子项 | 需父级display:flex |
常见错误
- 把vertical-align:bottom写在块级p或div上，不会有任何效果
- 忘记给span加display:inline-block，导致高度不参与行盒计算
- 在flex容器中混用两者，造成预期外的覆盖
注意：文中提到的<span>和<td>都是HTML标签名称，在说明时做了转义，实际写代码不需要转义这些符号。
掌握vertical-align:bottom的生效条件后，就能在HTML5文档里精准控制文字底部对齐，避免盲目套用样式。
HTML5vertical_align_bottomCSS布局修改时间：2026-07-28 09:18:19