对齐方式
控制文本水平和垂直对齐的细节
概念说明
表格中的对齐主要通过 text-align 和 vertical-align 控制。 这比使用 HTML
的旧版对齐属性更现代。
常见坑：align / valign 等 HTML 属性已废弃， 应使用 CSS。vertical-align
作用在 td/th 上更稳定， 不建议只对 tr 设置以免浏览器差异。
- text-align：控制水平对齐
- vertical-align：控制垂直对齐
基础语法
td {
text-align: right;
vertical-align: top;
}演示
水平与垂直对齐
| 对齐方式 | 金额 | 进度 |
|---|---|---|
| 顶部对齐 | ¥ 8,200 | 60% |
| 居中对齐 | ¥ 12,500 | 80% |
| 底部对齐 | ¥ 4,300 | 40% |
.align-center {
text-align: center;
}
.align-top td {
vertical-align: top;
}