text-align 文本水平对齐属性
最后更新：2026-09-13
text-align text-align 文本水平对齐属性
text-align 属性用于设置块级元素内文本的水平对齐方式，是最常用的文本样式之一。它支持左对齐、右对齐、居中对齐和两端对齐等多种取值，适用于段落、标题、单元格等所有块级容器。需要注意的是，text-align 对齐的是元素内部的内容，而非元素本身。
| 分类 | |
|---|---|
| 初始值 | start |
| 继承 | 是 |
| 适用于 | block |
| 可动画 | discrete |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
text-align: start | end | left | right | center | justify | match-parent;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
start | end | left | right | center | justify | match-parent | 关键字 | 文本水平对齐方式 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： start 和 end 会根据文本方向（direction）自动切换左右，比 left/right 更适合多语言网站。
注意： text-align 只对块级元素生效；要让行内元素（如图片）水平居中，需将其父容器设置 text-align: center。
❓ 常见问题
Qtext-align: justify 为什么有时效果不明显？
A两端对齐只对多行文本的最后一行之外的内容生效。如果文本只有一行，或者该行是段落的最后一行，justify 不会产生明显的间距调整效果。
Qtext-align 可以垂直居中吗？
A不可以。text-align 只控制水平方向的对齐。垂直居中需要使用 line-height、vertical-align、Flexbox 或 Grid 等方式实现。
Q如何让图片水平居中？
A图片是行内元素，直接设置 margin: auto 无效。把它的父容器设置 text-align: center 即可；或把图片设为 display: block 后再用 margin: 0 auto。Flexbox 中则用 justify-content: center。
🏷️ 相关属性
💡 相关案例
📚 相关教程
