CSS 对齐 - 绿叶网

CSS text-align 语法

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

语法：

text-align: 关键字;

说明：

text-align 的常用取值如下表所示。

text-align 属性取值
取值	说明
left（默认值）	左对齐
center	居中对齐
right	右对齐
justify	两端对齐，可能撑满一行
start	按照文本流方向左对齐
end	按照文本流方向右对齐

CSS text-align 示例

接下来，我们通过几个简单的例子来讲解一下 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 也可以作用于它。

示例 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/bird.jpg" alt=""></p>
    <p><img src="./imgs/bird.jpg" alt=""></p>
    <p><img src="./imgs/bird.jpg" alt=""></p>
</body>
</html>

页面效果如下图所示。

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

分析：

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