CSS 文本对齐方式实战：text-align 核心用法

CSS 的text-align属性是控制文本水平对齐的核心，仅需一行代码就能实现左对齐、居中、右对齐、两端对齐等效果，是网页排版中最常用的样式之一。本文结合极简实战代码，详解text-align的核心用法。

一、text-align 核心代码示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本对齐实战</title>
    <style>
        /* 基础居中对齐 */
        .center {
            text-align: center;
        }
        /* 左对齐（默认） */
        .left {
            text-align: left;
        }
        /* 右对齐 */
        .right {
            text-align: right;
        }
        /* 两端对齐（长文本适用） */
        .justify {
            text-align: justify;
            width: 300px; /* 固定宽度更易看出效果 */
        }
    </style>
</head>
<body>
    <p class="center">这是居中对齐的文字（标题/按钮文字常用）</p>
    <p class="left">这是左对齐的文字（网页正文默认样式）</p>
    <p class="right">这是右对齐的文字（日期/金额常用）</p>
    <p class="justify">这是两端对齐的文字，长文本使用两端对齐会让排版更整齐，左右边缘都紧贴容器边界。这是两端对齐的文字，长文本使用两端对齐会让排版更整齐。</p>
</body>
</html>

二、text-align 核心取值说明

属性值	效果说明	适用场景
`left`	文本左对齐（默认值）	网页正文、普通段落
`center`	文本居中对齐	标题、按钮文字、页面核心提示语
`right`	文本右对齐	日期、金额、表单右侧备注
`justify`	文本两端对齐（拉伸文本使左右边缘对齐）	长文本段落、新闻 / 文章正文

三、关键注意事项

作用范围 ：text-align作用于块级元素 （如 p、div、h1-h6），控制其内部行内元素 / 文本的对齐，对块级子元素无效；
两端对齐生效条件 ：justify仅在文本超过一行时生效，单行文本看不出效果（示例中给.justify设置固定宽度，便于演示）；
继承特性 ：子元素会继承父元素的text-align样式，如需单独调整，给子元素重新赋值即可。

总结

text-align是控制文本水平对齐的核心属性，核心取值为 left/center/right/justify；
居中对齐（center）适合标题，左对齐（left）是正文默认样式，两端对齐（justify）适合长文本排版；
text-align作用于块级元素，控制其内部文本 / 行内元素的对齐方式。