在一个块级容器中，当一行中的行内级框的总宽度，小于容器的宽度时，通过 text-align属性来指定这些行内级框在行中的水平分布。

事实上，text-align属性是通过指定行框与哪个点对齐，来决定行内级框在行中如何进行水平分布。可选值有 left | center | right | justify | start | end，默认值为start。不同取值的含义见表 3‑3：

表 3-3 text-align属性值及含义

属性值	含义
left	左对齐，所有行内级框的左边缘与容器的左边缘重合
center	居中对齐，所有行内级框的中线与容器的中线重合
right	右对齐，所有行内级框的右边缘与容器的右边缘重合
justify	两端对齐，所有行内级框的左右两端都在容器的内容边界上
start	起始边界对齐，所有行内级框的起始边缘与容器的起始边缘重合
end	结束边界对齐，所有行内级框的结束边缘与容器的结束边缘重合

当取值为 start 和 end 时，对齐的位置跟文本流的书写方向有关，书写方向不同，其对齐的位置也不同。对于从左到右的内容，start和left等价，end和right等价；对于从右到左的内容，start和right 等价，end和left等价。大多数情况下，文本流的默认书写方向为从左到右，而希伯来语和阿拉伯语等的默认书写方向为从右到左。

text-align属性只能应用于块级元素，它的最典型应用，就是指定段落中每一行内容的水平对齐方式。

段落是一个块级容器，容器中的每一行内容都会生成一个行框，就可以把段落看做是这些行框的堆叠。由于并非每一行的内容都能填满容器的宽度，因此，就可以通过 text-align属性，来指定每一行中内容的水平对齐方式。假设有四个段落，代码如下：

1. <p><span>The text-align property … aligned.<span></p>
2. <p><span>The text-align property … aligned.<span></p>
3. <p><span>The text-align property … aligned.<span></p>
4. <p><span>The text-align property … aligned.<span></p>

为了便于观察，把段落的文本显示包含在行内元素 span 中。通过限制 p 元素的宽度，使文本在两行内显示，并为 span 元素添加背景，为 p 添加边框：

1. p {
2. width: 400px;
3. border: 1px dashed #ccc;
4. }
5. span {
6. background: #ddd;
7. }

为上述段落应用不同的 text-align属性值，让第一个段落左对齐，第二个段落居中对齐，第三个段落右对齐，第四个段落两端对齐:

1. p:nth-child(1) {
2. text-align: left;
3. }
4. p:nth-child(2) {
5. text-align: center;
6. }
7. p:nth-child(3) {
8. text-align: right;
9. }
10. p:nth-child(4) {
11. text-align: justify;
12. }

得到的运行结果如图 3‑12 所示：

图3-12 文本对齐方式

从上图可以看出，并不是每一个文本行都到达容器内容区的边界。对于左对齐的段落，每一行的左边缘，都与容器内容区的左边界对齐，空白分布在容器的右侧。右对齐则恰好相反。居中的段落，文本行的中心与容器的中心对齐，空白在容器的左右两侧均匀分布。取值 justify 时，每一个文本行的左右两端都在容器的内边界上，没有空白。

text-align: justify是通过调整单词或字符间距，使各行的长度恰好相等，来实现两端对齐。由于 text-align: justify 对最后一行文本无效，因此，对单行文本也无效。