text-align: center 仅使块级容器内行内内容（如文字、span、img）水平居中，不控制块级元素自身位置；若需容器居中且文字左对齐，应外层用 flex 布局居中，内层元素显式设 text-align: left。
直接给容器设 text-align: center 再给内容加 text-align: left 就能实现「容器居中、文字左对齐」——但必须注意作用层级和元素类型，否则文字会跟着容器一起居中，或者根本不起效。
text-align 的作用对象是「块级容器内的行内内容」
text-align 不控制块级元素自身位置，只管它内部的文本、span、img（当 img 是行内元素时）等怎么排。所以常见错误是：给一个 div 加了 text-align: center，结果里面一段左对齐文字还是居中了——因为那段文字本身没设 text-align: left，继承了父容器的居中设置。
- 想让文字左对齐，必须在**文字所在元素**（如
p、div、span）上显式写text-align: left - 如果父容器用了
text-align: center，子元素又没重置，就会继承居中 -
text-align对display: flex或display: grid的子项无效——此时得用justify-content或place-items
容器居中 + 文字左对齐的典型组合写法
最稳妥的组合是：外层容器用 display: flex 居中，内层文字容器用 text-align: left。这样互不干扰，逻辑清晰。
- 外层
div.container { display: flex; justify-content: center; align-items: center; height: 100vh; } - 内层
div.content { text-align: left; max-width: 600px; } - 避免把
text-align: center和text-align: left都写在同一个元素上——后者会被前者覆盖或忽略 - 别用
margin: 0 auto配合text-align混搭：前者让块居中，后者管文字，但容易因宽度未设或 display 类型错导致失效
表格里数字右对齐但文字左对齐的坑
表格单元格（td）默认继承父 table 的 text-align，而很多框架或重置样式会全局设 text-align: left。结果你给某列加了 text-align: right，却发现数字还是左对齐——大概率是 CSS 优先级被覆盖，或者用了废弃的 align="right" 属性。
- HTML5 中
<td align="right"> 已废弃，W3C 验证失败，Chrome/Firefox 行为不一致 <li>正确做法：用类名控制，比如 <code><td class="numeric">123.45</td>，再写.numeric { text-align: right; font-family: monospace; } - 纯右对齐数字时，
font-family: monospace能防止小数点错位，比只靠text-align更可靠 - 检查开发者工具里的“Computed”面板，确认最终生效的是哪条
text-align规则
真正容易被忽略的不是怎么写，而是谁在继承、谁被覆盖、谁根本没生效——text-align 看似简单，但一旦嵌套多层或混用 flex/grid，就很容易变成“写了等于没写”。动手前先看一眼 computed styles，比反复改代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
