text-align 能控制文本及行内元素对齐，通过设置 left、center、right 或 justify 实现内容对齐，适用于段落、标题及 inline-block 元素整体居中，常用于按钮组或图标对齐，在无 Flex 时代配合 display: inline-block 实现水平居中，但仅作用于行内级内容，不直接影响块级元素，现代布局推荐结合 Flexbox 使用。
在网页布局中，text-align 虽然名字叫“文本对齐”，但它的作用不仅限于文本内容，还能影响行内元素和行内块元素的对齐方式。正确使用它，能快速实现容器内的水平对齐效果。
控制文本和行内内容的对齐
最常见用法是让段落、标题等文本内容在父容器中居左、居右或居中。
比如：- text-align: left; 文本靠左对齐（默认）
- text-align: center; 文本居中对齐
- text-align: right; 文本靠右对齐
- text-align: justify; 两端对齐，常用于段落排版
适用于 p、div、h1-h6 等块级容器中的文字内容。
让行内或行内块元素整体对齐
当一个容器内包含多个 inline 或 inline-block 元素时，比如图片、span 标签或按钮，使用 text-align 可以让它们作为一个整体在父容器中对齐。
立即学习“前端免费学习笔记（深入）”；
- 多个图标或按钮需要水平居中显示
- 图文混排时统一调整对齐方式
- 导航菜单项使用 display: inline-block 时进行对齐控制
例如，让一组 inline-block 按钮居中：
div {
text-align: center;
}
button {
display: inline-block;
}
在 Flex 布局普及前的居中技巧
在没有 Flexbox 和 Grid 的时代，text-align: center 配合 display: inline-block 是实现水平居中的常用方法。
示例：让一个 div 块居中.container {
text-align: center;
}
.box {
display: inline-block;
width: 200px;
}
此时 .box 会在 .container 中水平居中，因为父级把内容当作“文本”来居中处理。
注意作用范围和限制
text-align 是继承属性，子元素会继承父元素的对齐设置。
- 它只影响内部的行内级内容，不能直接对 block 元素 进行水平居中（除非转成 inline-block）
- 对浮动元素或绝对定位元素无效
- 现代布局推荐使用 Flexbox 或 Grid 实现更复杂的对齐，text-align 更适合简单场景
基本上就这些。text-align 虽然简单，但在实际布局中依然实用，尤其在快速对齐文本或行内元素时非常方便。掌握它的行为逻辑，能避免误用，也能在合适场景下提高开发效率。
