text-align 只对块级元素（如、、）和表格单元格（、）生效，控制其内部行内内容的水平对齐；对行内元素（如、）无效。

text-align 该用在哪个元素上才生效

text-align 只对块级元素（如 <p></p>、<div>、<code><h1></h1>）和表格单元格（<td>、<code><th>）起作用，对行内元素（如 <code><span></span>、<a></a>）设了也没用——它控制的是“内部行内内容的对齐”，不是自己怎么摆。

常见错误现象：<span style="text-align: center">文字</span> 完全没反应；实际得包一层 <div> 或直接用在父容器上。 <ul> <li>正确做法：把 <code>text-align 加在包含文本的块容器上，比如 <div style="text-align: right"><p>段落</p></div>

表格中可直接用在 <td> 上，<code><td style="text-align: justify"> 是合法且常用的 <li>Flex 布局下 <code>text-align 依然有效，但仅影响其内部的文本流，不影响 flex item 的排列（那是 justify-content 的事）

left / right / center / justify 四个值的实际表现差异

四个值看着简单，但 justify 在中文场景下基本等于“摆烂”：它靠拉伸空格实现两端对齐，而中文几乎不依赖空格分词，结果就是字挨得极紧，末行还常常左对齐，视觉上反而难看。

立即学习“前端免费学习笔记（深入）”；

使用场景判断：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• text-align: left 是默认值，不用显式写；适合绝大多数阅读场景
• text-align: center 常用于标题、按钮文字，注意别滥用——长段落居中会显著降低可读性
• text-align: right 多用于数字列（金额、编号）、RTL 语言（阿拉伯语、希伯来语），中文右对齐极少单独用
• text-align: justify 在英文 PDF 导出或印刷排版里有意义，网页中慎用；若真要模拟，得配合 text-justify: inter-word（支持度有限）

inline-block 元素里的文本对齐容易被忽略的细节

当容器里放了一堆 display: inline-block 的盒子（比如导航菜单项），想让它们整体居中，只给父容器设 text-align: center 是对的；但子元素如果本身是块级，又没设宽度，就可能撑满一行，导致对齐失效。

关键点：

• 父容器必须有明确的 text-align，子元素保持 inline-block 即可响应
• 子元素不要设 width: 100% 或浮动，否则会脱离文本流，text-align 失效
• 行高、字体大小不一致时，inline-block 元素底部默认按基线对齐，看起来像“没居中”，这时加 vertical-align: top 更稳

CSS 优先级和继承带来的意外覆盖

text-align 是可继承属性，所以父元素设了 text-align: right，所有后代文字都会右对齐——除非被更具体的规则覆盖。很多人调试时发现“明明写了 text-align: left，文字还是右的”，八成是祖先元素的样式漏看了。

排查建议：

• 用浏览器开发者工具检查计算样式（Computed），看 text-align 最终值来自哪条规则
• 注意 !important 的滥用，尤其第三方 UI 库（如 Ant Design）常带全局 text-align 重置
• 组件化开发中，避免在根容器（如 App）上设 text-align，改用局部类名控制更安全

真正麻烦的从来不是写对 text-align，而是它悄无声息地从父层漏下来，又和 flex、grid、float 混在一起，让对齐行为变得不可预测。动手前先看一眼父元素的 computed 样式，比反复试更省时间。