CSS教程
第一页 CSS教程－第3日
第二页 字间距及字母间距
第三页 行距
第四页 文字对齐及缩行
第五页 边距及空格填充
第六页 边框
第七页 浮动要素
第八页 第3天的练习
第九页 复习

[第1天][第2天][第3天][第4天][第5天][返回]

第四页 文字对齐及缩行

现在我们谈谈段落及图象的对齐和加入段落缩行。

文字对齐

利用文字对齐属性，你可以控制段落的水平对齐：

H4 { text-align: center }

这项属性只用于整块的内容，如<P>、 <H1>-<H6>、<BLOCKQUOTE>和 <UL>。

以下为各种选项：

left指将要素左对齐，如本段所示。

right指将要素右对齐，如本段所

示。

center指将要素居中，如本段所示。

justify指将要素左右对齐，如本段所示。justify 属性可用于Communicator(两种操作平台)及IE 4 (Windows版), 但不能用于MAC机的IE 3或IE 4。

截止现在，我们所谈到的只是将CSS用于文字，但CSS 的属性页可以用于其它替代要素（替代要素指用其它内容代替了的要素，图象是最常用的替代内容，还有Java applets,QuickTime movies和其它内容。）

所以我们可以将图象右对齐，如下所示：

（如果你将样式表属性直接加到<IMG>之上，Communicator有时候可能会捣乱。为了安抚它的这种驴脾气，你可以将<IMG>包含在<SPAN>或<DIV>之内，然后将样式表加到<SPAN>或<DIV>上，最好是加在<DIV>上，因为IE 4有时候对于联结到<SPAN>上的样式会闹一点小性子。

垂直对齐

目前浏览器根本还不能支持初衷对齐属性，但愿5.0版的浏览器能够做到这一点。

H4 { vertical-align: top }

垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直位置。例如，如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐，则该GIF图象将在该行文字的顶部显示。

以下为各项参数：

• top将要素顶部同最高的母体要素对齐。
• bottom将要素的底部同最低的母体要素对齐。 
• text-top将要素的顶部同母体要素文字的顶部对齐。
• text-bottom将要素的底部同母体要素文字的底部对齐。
• baseline将要素的基准线同母体要素的基准线对齐。
• middle将要素的中点同母体要素的中点对齐。
• sub将要素以下标的形式显示。
• super将要素以 上标的形式显示。

目前只有IE 4能支持这项属性，它支持最后的两项参数。

文字缩行

你想使段落缩行吗？（在Internet上呆一段时间之后，你可能已经忘了缩行是怎么一回事！）

P { text-indent: 2em }

在本段中你就可以看到缩行的应用。该属性只应用于整块的内容。你可以使用任何一种熟悉的长度单位设定缩行。

你还可以使用比例参数。例如，本段的缩行为40％的比例，即本段的第1行的起始位置比其正常位置缩进了40％。

(Windows版的IE 4假定比例指相对于整个浏览器窗口。而不是指段落的宽度） 如果你将文字缩行赋予一个负值，则文字第1行的起始位置比其正常位置还偏左。

本段的文字缩行赋值为－10象素。IE 4对这项属性不太适应，它有可能不显示最初的几个字母。

充分运用你的缩行威力吧，年轻的杰地战士！ >>