text-align: left 仅对块级容器内的行内内容生效，不作用于块级子元素、Flex/Grid容器子项或脱离文档流的元素；失效常见于父容器布局干扰、样式覆盖或误用于非行内内容场景。
直接用 text-align: left 就能解决大部分文本和行内元素的左对齐问题，但具体生效方式取决于元素类型和父容器布局，不是所有场景都适用同一个写法。
text-align: left 为什么有时不生效
这个属性只对**块级容器内的行内内容**起作用，比如 <p>、<div> 里的文字或 <img>（默认行内）。如果父容器是 flex 或 grid 布局，text-align 就完全没用；如果目标元素本身是块级且没有包裹它的父块，那它自然靠左，但你设了也没错。
- 常见错误：给
<div>自己设text-align: left，但它里面只有另一个<div>（块级），这时对齐无效 - 典型现象：文字没左对齐，开发者工具里看到
text-align: left被其他样式覆盖（比如父级设了text-align: center） - 检查建议：右键「检查」→ 看「Computed」标签页里
text-align最终值，再看「Styles」里哪条规则把它覆盖了
图片左对齐的三种可靠写法
<img> 默认是行内元素，所以多数情况靠 text-align: left 控制；但若要脱离文本流或独立控制，就得换方法。
- 父容器设
text-align: left：最轻量，适合图文混排场景 -
<img>自身加display: block; margin-right: auto;：强制变成块级并左贴边，margin-right: auto是关键，不是margin-left: 0 - 用
float: left：兼容老浏览器，但必须处理父容器塌陷——在父容器末尾加<div style="clear: both"></div>或用伪类::after
表格整体左对齐的正确姿势
<table> 默认就是左对齐的，所谓“居中”通常是父容器干扰导致的。别用已废弃的 align="left" 属性。
立即学习“前端免费学习笔记（深入）”；
- 先确认父
<div>没有text-align: center或display: flex; justify-content: center - 给
<table>显式加margin-right: auto（默认margin: 0，左右都是 0，自然左贴边） - 如果父容器是 flex 布局，直接给
<table>加margin-right: auto或在父容器上用justify-content: flex-start
现代布局下 left 对齐容易被忽略的点
flex 和 grid 已成主流，但很多人还习惯性套用 text-align，结果失效还不知道为啥。
- flex 容器里，子元素对齐由
justify-content和align-items控制，text-align不起作用 - grid 容器里同理，用
justify-items: start或给单个格子设justify-self: start - 绝对定位元素（
position: absolute）靠left: 0实现左贴边，跟text-align完全无关 - 行内元素（如
<span>）即使父容器是 flex，只要没设display: block，依然受text-align影响
真正决定左对齐效果的，从来不是“用了哪个属性”，而是“这个属性在当前渲染上下文里是否被设计为生效”。查开发者工具比背口诀管用得多。
