text-align在媒体查询中失效的主因是优先级冲突、继承覆盖或盒模型不稳定；需检查计算样式，避免滥用!important，结合max-width/margin控制容器宽度，并在图文混排时改用flex布局。
text-align 在媒体查询中失效的常见原因
直接在 @media 里写 text-align: center 却没生效？大概率是 CSS 优先级或继承覆盖问题。比如父容器设置了 text-align: left，子元素又没显式重置，或者用了 !important 的全局规则强行锁死对齐方式。
- 检查计算样式（DevTools 的 Computed 面板），确认最终生效的是哪条
text-align声明 - 避免在通用类（如
.content）上写带!important的text-align，它会阻断所有响应式覆盖 - 移动端常用文字居中，但标题和段落语义不同——别用同一套规则硬套，应按语义分层控制
用 max-width + text-align 组合适配多断点
纯靠 text-align 不够，需配合容器宽度控制。例如小屏下强制窄列显示，再居中；大屏恢复左对齐保持可读性。关键不是“在哪改对齐”，而是“对齐作用在哪个盒模型上”。
h1 {
text-align: left;
}
@media (max-width: 768px) {
h1 {
max-width: 90vw;
margin: 0 auto;
text-align: center;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
h1 {
max-width: 800px;
text-align: left;
}
}
注意：这里 max-width 和 margin: 0 auto 是让居中真正“看得见”的前提，否则 text-align: center 作用在 100% 宽的块上，视觉毫无变化。
flex + justify-content 替代 text-align 的适用场景
当文字对齐依赖于容器内多个元素（比如图标+标题+按钮）的相对位置时，text-align 就力不从心了。此时该切到 Flex 布局，用 justify-content 控制主轴对齐，更可控。
立即学习“前端免费学习笔记（深入）”；
-
text-align只影响**行内内容**（文本、图片、inline 元素）的对齐 -
justify-content影响**Flex 子项整体**在容器主轴上的分布，适合图文混排、按钮组等结构 - 小屏下用
flex-direction: column+align-items: center比反复调text-align更可靠
font-size 变化导致对齐“错位”的隐性问题
文字大小一变，基线位置就动，尤其在 vertical-align: middle 或行高不一致时，表面看是“对齐混乱”，实际是行框高度塌陷或溢出。这不是 text-align 的锅，但常被误判。
- 统一设置
line-height（推荐无单位值，如line-height: 1.5），避免字体缩放后行高失衡 - 用
em或rem设置font-size，并在根元素用clamp()平滑过渡，例如：font-size: clamp(1rem, 4vw, 1.5rem) - 如果用了
transform: scale()缩放文字，text-align仍按原始尺寸计算，视觉必然偏移
真正难调的从来不是对齐方向本身，而是对齐所依赖的盒模型是否稳定——宽度、行高、基线、缩放，任何一个变量失控，text-align 都会表现异常。
