HTML/CSS中text-align属性怎么正确使用？文本居中实践有哪些？

text-align是CSS中用于控制文本水平对齐方式的基础属性，很多开发者在刚接触时容易混淆它的适用场景，下面我们结合实例详细讲解它的用法和文本居中的实践技巧。

text-align属性的基本语法

text-align属性可以设置给块级元素，控制其内部行内内容（包括文本、行内元素、行内块元素）的水平对齐方式，可选值包括left、right、center、justify等，默认值为left（部分语言环境为right）。

需要注意的是，text-align只对块级容器内部的行内内容生效，如果直接设置给行内元素是不会起作用的。

基础使用示例

/* 设置div容器内的文本水平居中 */
.text-center {
    text-align: center;
}
/* 设置段落文本右对齐 */
.right-text {
    text-align: right;
}
/* 设置文本两端对齐 */
.justify-text {
    text-align: justify;
}

text-align实现文本居中的实践场景

单行文本居中

对于单行文本，只需要给父块级容器设置text-align: center即可实现居中，这是最常见的使用场景。

<div class="single-line">
    <p>这是单行居中的文本</p>
</div>

.single-line {
    text-align: center;
    /* 可选：设置高度和行高相等实现垂直居中 */
    height: 40px;
    line-height: 40px;
}

多行文本居中

多行文本同样可以通过text-align实现水平居中，不需要额外设置其他属性，只要父容器是块级元素即可。

<div class="multi-line">
    <p>这是第一行居中的多行文本</p>
    <p>这是第二行居中的多行文本</p>
    <p>这是第三行居中的多行文本</p>
</div>

.multi-line {
    text-align: center;
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #eee;
}

行内块元素居中

text-align不仅能居中文本，还能居中容器内部的行内块元素，比如多个按钮横向排列需要居中时就可以使用。

<div class="btn-group">
    <button class="btn">确认</button>
    <button class="btn">取消</button>
    <button class="btn">返回</button>
</div>

.btn-group {
    text-align: center;
    padding: 15px;
}
.btn {
    display: inline-block;
    padding: 8px 20px;
    margin: 0 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

text-align和其他居中方式的区别

很多开发者会混淆text-align和margin的居中用法，两者的适用场景完全不同，我们可以通过下面的表格来对比：

常见使用误区

• 不要给行内元素设置text-align，比如直接给<span>设置text-align center是不会生效的，需要给它的块级父容器设置。
• text-align不会让块级子元素居中，比如容器内部的div子元素，即使设置了text-align center也不会居中，这种场景需要用margin或者flex布局。
• text-align不会控制垂直方向的对齐，如果需要文本垂直居中，需要结合line-height（单行）或者flex布局（多行）来实现。

注意：text-align属性会被子元素继承，如果父容器设置了text-align center，所有子行内内容默认都会居中，需要单独给不需要居中的子元素重新设置text-align值。

text-alignCSSHTML文本居中修改时间：2026-05-25 10:35:44