text-align: left 仅作用于内联级内容（如文本、span、img）的水平对齐，不影响块级元素自身定位；让块级元素整体左对齐应使用 margin-right: auto 或 flex 布局。
text-align: left 只对内联内容生效
很多人一上来就给 div 或 section 加 text-align: left，发现没用——其实它只影响内部的文本、span、img 等内联级元素的**水平对齐位置**，不控制块级元素自身的定位。
常见错误现象：
– 给一个空的 div 设置 text-align: left，里面什么也没放，看起来“没反应”
– 里面放了 button 或 input，它们默认是替换元素（replaced element），行为接近内联，所以会被 text-align 影响；但若加了 display: block 就失效了
实操建议：
– 确保目标是让文字、图标、行内按钮等左对齐，直接用 text-align: left
– 不要指望它把整个 div “推到左边”，那是 margin 或 float 的事
– 在父容器上设置，子元素中的内联内容自动继承（除非被子元素显式覆盖）
让块级元素自身左对齐：用 margin 或 flex
如果目标是让一个 div、aside 或自定义组件整体靠左（比如脱离居中布局、清除右侧空白），text-align 不起作用，得换思路。
立即学习“前端免费学习笔记（深入）”；
实操建议：
– 最常用且干净的方式：给该元素设 margin-right: auto（配合默认的 margin-left: 0）
– 若父容器是 flex 布局，直接在父元素上加 justify-content: flex-start，子项自然左对齐
– 避免用 float: left，它会脱离文档流，容易引发高度塌陷等问题，现代布局中已不推荐
.container {
display: flex;
}
.left-aligned-box {
margin-right: auto;
}table-cell 和 inline-block 的特殊对齐逻辑
当元素设为 display: table-cell 或 display: inline-block 时，text-align 的作用对象会变化，容易误判。
常见错误现象：
– 把 div 设成 display: inline-block 后，发现它还是居中或右对齐，其实是父容器的 text-align 在控制它的**行内对齐位置**
– table-cell 元素内的文字受自身 text-align 控制，但整个 cell 的水平位置由父 table 或 table-row 决定
实操建议：
– 对 inline-block 元素，若想让它左对齐，优先确保其父容器有 text-align: left
– 不要给 table-cell 单独设 margin 左右对齐，应通过 table-layout 或调整 td 的 align 属性（HTML 属性已废弃，建议用 CSS text-align）
– 混合使用时，先确认 display 类型，再决定用 text-align 还是 margin / flex
全局重置后 text-align 的意外覆盖
很多项目用了 CSS reset 或 modern-normalize，其中可能包含类似 body { text-align: center; } 的规则。一旦写了，所有后代内联内容默认居中，你局部写 text-align: left 可能被层级或 specificity 盖过去。
排查建议：
– 打开浏览器开发者工具，选中文字元素，看 computed 栏里 text-align 的最终值和来源
– 检查是否被更宽泛的选择器（如 * { text-align: center; }）覆盖
– 如果必须强制左对齐，可用 text-align: left !important，但应先理清样式层叠路径，避免滥用
真正难的不是怎么写 left，而是搞清“谁在对齐谁”——文字？盒子？还是整行？不同 display 类型下，对齐的主语完全不同。
