CSS text-align 语法
在 CSS 中,text-align 属性用于定义 “文本”、“inline 元素” 或 “inline-block 元素” 在水平方向上的对齐方式。
语法:
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 不仅可以作用于文本,还可以作用于 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>页面效果如下图所示。

分析:
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>页面效果如下图所示。

分析:
img 是一个 inline-block 元素(display: inline-block;),text-align 同样可以作用于它。
