縮進(jìn)文本

把 Web 頁(yè)面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。

CSS 提供了 text-indent 屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。

通過(guò)使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值。

這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：

p {text-indent: 5em;}

注意：一般來(lái)說(shuō)，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無(wú)法應(yīng)用 text-indent 屬性。不過(guò)，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。

提示：如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。

使用負(fù)值

text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：

p {text-indent: -5em;}

不過(guò)在為 text-indent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問(wèn)題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有長(zhǎng)度單位，包括百分比值。

百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說(shuō)，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。

在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素：

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

繼承

text-indent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記：

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。

水平對(duì)齊

text-align 是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。它的前 3 個(gè)值相當(dāng)直接，不過(guò)第 4 個(gè)和第 5 個(gè)則略有些復(fù)雜。

值 left、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。

西方語(yǔ)言都是從左向右讀，所有 text-align 的默認(rèn)值是 left。文本在左邊界對(duì)齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對(duì)于希伯來(lái)語(yǔ)和阿拉伯語(yǔ)之類的的語(yǔ)言，text-align 則默認(rèn)為 right，因?yàn)檫@些語(yǔ)言從右向左讀。不出所料，center 會(huì)使每個(gè)文本行在元素中居中。

提示：將塊級(jí)元素或表元素居中，要通過(guò)在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來(lái)實(shí)現(xiàn)。

text-align:center 與 <CENTER>

您可能會(huì)認(rèn)為 text-align:center 與 <CENTER> 元素的作用一樣，但實(shí)際上二者大不相同。

<CENTER> 不僅影響文本，還會(huì)把整個(gè)元素居中。text-align 不會(huì)控制元素的對(duì)齊，而只影響內(nèi)部?jī)?nèi)容。元素本身不會(huì)從一段移到另一端，只是其中的文本受影響。

justify

最后一個(gè)水平對(duì)齊屬性是 justify。

在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。您也許已經(jīng)注意到了，兩端對(duì)齊文本在打印領(lǐng)域很常見(jiàn)。

需要注意的是，要由用戶代理（而不是 CSS）來(lái)確定兩端對(duì)齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請(qǐng)參閱 CSS text-align 屬性參考。

有興趣可以查看CSS手冊(cè)，相信會(huì)理解更透徹。