HTML元素对齐属性的用法详解-html教程-PHP中文网

HTML5已废弃align和valign，现代对齐应使用CSS布局模型：text-align控制块内行内内容水平对齐，vertical-align仅适用于inline/inline-block/table-cell元素，块级元素居中需用margin:0 auto（定宽）或flex/grid布局。

html元素对齐属性的用法详解

HTML5 中没有合法的、推荐使用的对齐属性——align 和 valign 已被正式废弃，任何依赖它们实现对齐的写法都属于过时实践，现代浏览器虽可能兼容，但行为不可靠、不具可维护性。

text-align 只管块内行内内容的水平对齐

这是最常被误用也最容易“看起来有效”的属性。它只作用于块级容器（如

、

、）内部的行内内容：文字、、 等。
text-align: center 让文字在容器内居中，但不会让  自身居中——那是父容器的事
对 display: flex 或 display: grid 子项无效，它们走各自的对齐体系

在表格单元格里仍可用：td { text-align: right; } 控制单元格内文本右对齐
值 start/end 比 left/right 更适合多语言场景，会随 dir 属性自动切换
vertical-align 不是给块元素用的
这个属性根本不会在 
、

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										、 上生效，只对三类元素起作用：display: inline、inline-block、table-cell（即  上写 vertical-align，它不参与内容对齐计算；统一控制请用 td, th { vertical-align: middle; }
想让块级元素自身居中？别碰 align，用 CSS 布局模型
所谓“让一个 
 居中”，本质是控制它在父容器中的定位。HTML 层面没有任何属性能做到这点。
定宽块水平居中：margin: 0 auto，但必须配合显式 width，且不能有 float 或 position: absolute

通用居中（含垂直）：display: flex + justify-content: center + align-items: center，父容器需有明确尺寸约束或内容撑高
表格居中不是  / ）。
图片底部有空白？大概率是  默认 vertical-align: baseline 导致的，加 vertical-align: bottom 或 display: block 就能解决
在  里设 vertical-align: middle，但没效果？检查该单元格是否真有高度——若只有一行文本且没设 height 或足够 padding，视觉上就看不出“居中”
别往 
，而是给 
 加 margin: 0 auto，再配 display: block（否则默认为 inline-table，margin 不生效）
Grid 和 Flex 的对齐参数容易混淆
这两个模型都有 justify- 和 align- 开头的属性，但作用轴不同，且仅在对应 display 模式下有效。


justify-content 总是控制主轴（flex-direction 或 grid-auto-flow 决定方向），align-items 控制交叉轴

place-items: center 是简写，等价于 justify-items: center; align-items: center，但它只影响网格项在各自单元格内的对齐，不是让整个  在页面中居中
Flex 下 align-self 可覆盖单个子项的垂直对齐，但前提是父容器已设 align-items；Grid 下对应的是 justify-self / align-self

真正容易被忽略的点是：对齐效果是否可见，往往取决于容器是否有明确的尺寸约束或内容是否撑开空间。比如 align-items: center 在高度由内容决定的 flex 容器里，常常“没反应”——不是代码错了，是容器根本没留给它发挥的垂直空间。