CSS text-align 属性

CSS text-align 语法

在 CSS 中，text-align 属性用于定义 “文本” 、“inline 元素” 或 “inline-block 元素” 在水平方向上的对齐方式。

语法：

text-align: 关键字;

说明：

text-align 的取值是一个关键字，如下表所示。

text-align 属性取值
取值	说明
left	左对齐
center	居中对齐
right	右对齐
justify	两端对齐
start（默认值）	根据文本方向对齐。对于从左到右的文本（如英文），效果同 left；对于从右到左的文本（如阿拉伯文），效果同 right。
end	根据文本方向对齐。对于从左到右的文本，效果同 right；对于从右到左的文本，效果同 left。
match-parent	根据父元素的 text-align 值和父元素的 direction 值来对齐。继承父元素的对齐方式，但会考虑父元素的文本方向。

对于 text-align 属性，小伙伴们要清楚以下几点。

text-align 属性应用于块级元素，并影响其内部的行内内容。它不会直接影响块级元素自身的对齐方式。
justify 值可以使文本看起来更整齐，但在某些情况下可能会导致单词之间的间距过大，影响可读性。
start 和 end 值更适合用于国际化网站，因为它们能够根据文本方向自动调整对齐方式。

CSS text-align 摘要

属于	CSS 文本对齐
使用频率	高
是否继承	是
默认值	start
兼容性	查看
官方文档	查看
MDN	查看

CSS text-align 示例

接下来，我们通过几个简单的例子来讲解一下 CSS text-align 属性是如何使用的。

示例 1：text-align 作用于 “文本”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-align: left; }
        p:nth-child(2) { text-align: center; }
        p:nth-child(3) { text-align: right; }
    </style>
</head>
<body>
    <p>好好学习，天天向上。（left）</p>
    <p>好好学习，天天向上。（center）</p>
    <p>好好学习，天天向上。（right）</p>
</body>
</html>

页面效果如下图所示。

text-align作用于“文本”

分析：

从名字上看，text-align 是用于控制文本的对齐方式。实际上，text-align 不仅可以作用于文本，还可以作用于 inline 元素、inline-block 元素。

示例 2：text-align 作用于 “inline 元素”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-align: left; }
        p:nth-child(2) { text-align: center; }
        p:nth-child(3) { text-align: right; }
    </style>
</head>
<body>
    <p><strong>绿叶网（left）</strong></p>
    <p><strong>绿叶网（center）</strong></p>
    <p><strong>绿叶网（right）</strong></p>
</body>
</html>

页面效果如下图所示。

text-align作用于“inline元素”

分析：

strong 元素是一个 inline 元素（即 display: inline;），text-align 也可以作用于它。

注意: text-align 是一个继承属性，我们必须设置在父元素（块级容器）上，才能控制其内部行内元素的对齐，直接写在行内元素上是无效的。

示例 3：text-align 作用于 “inline-block 元素”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-align: left; }
        p:nth-child(2) { text-align: center; }
        p:nth-child(3) { text-align: right; }
    </style>
</head>
<body>
    <p><img src="./imgs/logo.jpg" alt=""></p>
    <p><img src="./imgs/logo.jpg" alt=""></p>
    <p><img src="./imgs/logo.jpg" alt=""></p>
</body>
</html>

页面效果如下图所示。

text-align作用于“inline-block元素”

分析：

img 是一个 inline-block 元素（display: inline-block;），text-align 同样可以作用于它。