揭秘CSS(第 1 版)
3.2.2 水平对齐
阅读(

概述

CSS选择器

字体和文本

字体

文本

文本缩进

水平对齐

在一个块级容器中,当一行中的行内级框的总宽度,小于容器的宽度时,通过 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属性,来指定每一行中内容的水平对齐方式。假设有四个段落,代码如下:

<p><span>The text-align property … aligned.<span></p>
<p><span>The text-align property … aligned.<span></p>
<p><span>The text-align property … aligned.<span></p>
<p><span>The text-align property … aligned.<span></p>

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

p {
   width: 400px;
   border: 1px dashed #ccc;
}
span {
   background: #ddd;
}

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

p:nth-child(1) {
   text-align: left;
}
p:nth-child(2) {
   text-align: center;
}
p:nth-child(3) {
   text-align: right;
}
p:nth-child(4) {
   text-align: justify;
}

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

文本对齐方式
图3-12 文本对齐方式

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

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验