text-align用于控制块级元素内内联内容的水平对齐，支持left、right、center、justify等值，影响文本、图片等内联内容的排列方式。
text-align 是 CSS 中控制文本水平对齐方式最常用的属性，适用于块级元素内的内联内容（如文字、图片等）。掌握它的用法能有效提升页面排版的美观性和可读性。下面介绍几种常见的使用技巧和注意事项。
基本对齐方式
text-align 支持多种基础对齐值，适用于大多数文本布局场景：
- text-align: left; — 文本靠左对齐（默认值）
- text-align: right; — 文本靠右对齐
- text-align: center; — 居中对齐
- text-align: justify; — 两端对齐，使每行宽度一致，常用于段落排版
例如，让标题居中显示：
h1 { text-align: center; }
在不同元素中的应用
虽然 text-align 作用于块级容器，但它影响的是容器内部的内联级内容。理解这一点很重要。
立即学习“前端免费学习笔记（深入）”；
常见应用场景包括：
- 对齐 div 中的文本：div { text-align: right; }
- 让图片像文字一样对齐（因为图片默认是内联元素）：img { display: inline; }，然后在其父容器设置 text-align
- 按钮或导航项居中：nav { text-align: center; }，内部链接设为 display: inline-block;
处理多行文本的高级对齐
当需要更精细控制多行文本（如标题换行）的对齐时，text-align 可能不够用。此时可结合其他方法：
- 使用 text-align: justify; 配合伪元素实现真正的两端对齐：
p { text-align: justify; } p::after { content: “”; display: inline-block; width: 100%; }
这样最后一行也能撑满，避免右侧参差不齐。
- 对于完全居中（水平+垂直），text-align 只解决水平部分，需配合 line-height 或 flex 布局。
注意事项与兼容性
使用 text-align 时注意以下几点：
- 它不会影响块级元素自身的定位，只影响其内部的文本流
- 对浮动元素无效，浮动会脱离文本流
- 在 Flex 或 Grid 容器中，text-align 对主轴对齐无效，应使用 justify-content 或 align-items
- 老版本浏览器对 justify 的支持可能存在差异，测试时需留意
基本上就这些。灵活运用 text-align 能快速实现多数文字对齐需求，关键是理解它作用的对象和适用范围。