文字对齐失效主因是容器布局模式（flex/grid）或媒体查询配置不当；flex/grid中需用justify-content/align-items替代text-align，响应式须校验断点、权重与加载顺序，并处理RTL及溢出问题。
文字对齐在响应式布局中出错，通常不是text-align本身有问题，而是它作用的容器宽度、浮动、flex或grid布局干扰了预期效果，或媒体查询未覆盖关键断点。重点检查父容器的显示模式和断点设置是否匹配内容变化。
确认父容器的display类型是否影响text-align
text-align只对块级元素内的行内内容起作用（如文字、span、图片等）。如果父容器是display: flex或display: grid，text-align会失效——此时需改用justify-content（主轴）或align-items（交叉轴）。
- Flex容器居中文字：用
justify-content: center（水平） +align-items: center（垂直） - Grid容器文字左对齐：确保子项是块级且无
place-self覆盖，再设text-align: left - 清除浮动后仍不对齐？加
overflow: hidden或clear: both保证父容器正确包裹内容
媒体查询中text-align未生效的常见原因
断点写错、选择器权重不足、CSS加载顺序错误，都可能导致响应式对齐“看起来没变”。建议统一用min-width逻辑，并把响应式规则放在常规样式之后。
- 写法示例（推荐）：
.title { text-align: left; }<br> @media (min-width: 768px) { .title { text-align: center; } }<br> @media (min-width: 1024px) { .title { text-align: right; } } - 避免用
!important硬覆盖，优先提升选择器特异性，比如用.header .title代替单类名 - 用浏览器开发者工具的“Styles”面板，实时勾选/取消媒体查询，确认对应规则是否被应用
移动端小屏下文字溢出导致对齐“偏移”
文字未换行、容器过窄、字体过大时，text-align: center看起来像右偏——其实是文字整体超出了容器可视区。这不是对齐问题，而是布局失控。
立即学习“前端免费学习笔记（深入）”；
- 给文字容器加
word-break: break-word或overflow-wrap: break-word - 限制最大宽度：
max-width: 100%;防止宽内容撑开父容器 - 配合视口单位调整字号：
font-size: clamp(1rem, 4vw, 1.5rem);让文字随屏幕缩放
多语言或RTL内容需额外处理
阿拉伯语、希伯来语等从右向左书写的文字，仅靠text-align: right不够，必须设置dir="rtl"或direction: rtl，否则标点、数字顺序和对齐逻辑都会异常。
- HTML中直接写：
<p dir="rtl">مرحبا</p> - CSS中控制：
[lang="ar"] { direction: rtl; text-align: right; } - 避免混用
float: right和text-align，易引发方向冲突
