在HTML页面开发中，文本居左是最常用的对齐方式之一，也是浏览器的默认文本对齐规则，但在实际开发中我们可能会因为样式覆盖等原因需要手动设置文本居左，或者快速调整已存在的文本对齐状态。
HTML原生属性设置文本居左
早期的HTML版本提供了align属性可以直接设置文本对齐方式，居左对齐只需要将属性值设置为left即可。这种方式不需要额外引入CSS，适合简单的静态页面快速调整。
<!-- 给段落设置居左对齐 --> <p align="left">这是一段居左对齐的文本内容</p> <!-- 给标题设置居左对齐 --> <h3 align="left">居左对齐的标题</h3>
需要注意的是，align属性在HTML4.01之后已经被废弃，HTML5不再推荐使用该属性，仅在兼容旧页面时可以考虑使用，新开发的项目不建议采用这种方式。
CSS样式设置文本居左
使用CSS设置文本居左是现在主流的实现方式，灵活性更高，支持全局样式控制，也支持单独给某个元素设置居左对齐规则。
行内样式快速设置
如果只是临时调整单个元素的文本居左，可以直接给元素添加行内样式，使用text-align属性设置为left即可，这种方式修改即时生效，不需要修改外部样式文件。
<div style="text-align: left;">
<p>这个div内的所有文本都会居左对齐</p>
<span>包括行内元素的内容</span>
</div>
内部样式或外部样式批量设置
如果需要让多个元素或者整个页面的文本默认居左，可以使用内部样式表或者外部CSS文件统一设置，减少重复代码。
/* 给所有段落设置居左对齐 */
p {
text-align: left;
}
/* 给类名为left-text的元素设置居左对齐 */
.left-text {
text-align: left;
}
/* 给id为content的区域设置居左对齐 */
#content {
text-align: left;
}
对应的HTML调用方式如下：
<p>这个段落会应用CSS的居左对齐规则</p>
<div class="left-text">这个类名为left-text的元素内文本居左</div>
<section id="content">
<p>这个区域的所有文本都居左</p>
</section>
快速调整文本居左的技巧
如果已经写好的页面文本对齐异常，需要快速调整为居左，可以按照以下步骤操作：
- 先检查元素是否被设置了
text-align: center或者text-align: right的样式，直接在对应样式中把值改为left即可。 - 如果是旧页面使用了
align属性导致对齐异常，把align的属性值改为left，或者删除该属性（浏览器默认文本居左）。 - 如果需要全局调整，直接在页面的
body样式中设置text-align: left，所有子元素默认都会继承这个对齐规则，除非子元素单独设置了其他对齐方式。
不同方式的对比
下面整理了两种主流设置方式的对比，方便你根据实际场景选择：
| 实现方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| HTML align属性 | 无需CSS，写法简单 | 已被HTML5废弃，可维护性差 | 仅兼容非常旧的静态页面 |
| CSS text-align属性 | 符合标准，灵活度高，支持批量控制 | 需要了解基础CSS语法 | 所有新开发的项目，需要批量调整样式的场景 |
注意事项
text-align: left是text-align属性的默认值，如果某个元素的文本没有居左，大概率是被其他CSS规则覆盖了这个默认值，此时不需要额外设置，只需要排查并删除覆盖的text-align其他值即可。
另外text-align属性控制的是元素内文本的水平对齐方式，不会影响元素本身的位置，如果需要调整元素本身在页面中的位置，需要使用margin、position等其他CSS属性。
HTML文本居左text_align对齐方式CSS修改时间：2026-07-01 18:42:48