text-align: left仅作用于块级元素内部的文本、span、img等内联内容，不影响块级元素自身位置；让块级元素自身左对齐应使用margin-left: 0、flex布局的justify-content: flex-start等方案。
用 text-align: left 对齐内联内容
这个 CSS 属性只对元素内部的文本、span、img（当它们是内联元素时）等起作用，不是用来“把整个块级元素往左挪”的。很多人一上来就给 div 加 text-align: left，发现没反应——其实是用错了对象。
常见错误现象：div 本身居中了（比如父容器用了 margin: 0 auto），但里面文字还是居中，这时加 text-align: left 才生效。
实操建议：
- 确保目标是控制「元素内部子内容」的水平对齐方式
- 对
p、h1、div这类块级容器设text-align: left - 不要对
img或span单独设该属性（它不生效）
<div style="text-align: left;"> <p>这段文字会靠左</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <span>这个 span 也靠左（因为继承父级）</span> </div>
让块级元素自身左对齐（比如 div 居左）
如果想让一个 div、section 这类块级元素“贴着父容器左边显示”，默认它本来就是左对齐的——除非你主动加了 margin: 0 auto、float: right 或用了 Flex/Grid 布局改变了行为。
所以真正要检查的是：它有没有被其他规则“推偏”。常见干扰项：
- 父容器设置了
text-align: center（不会影响子div的位置，但新手常误判） - 自己写了
margin: 0 auto（这是居中关键，删掉就回左侧） - 用了
float: right或position: absolute配了right
最干净的做法：显式重置为 margin-left: 0，并确认没 float 或 position 干扰。
<div style="margin: 0 auto; width: 300px;">我本该居中</div> <div style="margin-left: 0; width: 300px;">现在靠左了</div>
Flex 布局下怎么让子项左对齐
如果父容器用了 display: flex，那子元素的对齐由 justify-content 控制，text-align 完全无效。
默认值是 justify-content: flex-start，也就是左对齐——所以多数时候你什么都不用加。但如果之前设过 justify-content: center 或 space-between，就得改回来。
注意：flex-start 是相对于 flex 容器主轴起点而言的，主轴方向由 flex-direction 决定（默认是 row，从左到右）。
<div style="display: flex; justify-content: flex-start;"> <div>第一项</div> <div>第二项</div> </div>
表格单元格（td/th）左对齐
表格单元格默认就是左对齐文本，但如果你看到居中或右对齐，大概率是全局 CSS 重置了 td 样式（比如某些 UI 框架）。此时直接在行内或类里覆盖即可。
别用 align="left"（HTML4 旧写法，已废弃），统一用 CSS。
<table>
<tr>
<td style="text-align: left;">左对齐内容</td>
<td>默认也是左对齐</td>
</tr>
</table>
最容易被忽略的一点：对齐行为高度依赖上下文——是文本？是块？是 flex 子项？还是表格？没有万能解法，得先判断当前元素所处的布局模式，再选对应属性。盲目套 text-align 或 margin: 0 auto 是多数对齐问题的根源。
