CSS text-align 屬性
定義和用法
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。
該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。通過(guò)允許用戶(hù)代理調(diào)整行內(nèi)容中字母和字之間的間隔，可以支持值 justify；不同用戶(hù)代理可能會(huì)得到不同的結(jié)果。
| 默認(rèn)值： | 如果 direction 屬性是 ltr，則默認(rèn)值是 left；如果 direction 是 rtl，則為 right。 |
|---|---|
| 繼承性： | yes |
| 版本： | CSS1 |
| JavaScript 語(yǔ)法： | object.style.textAlign="right" |
實(shí)例
設(shè)置 h1、h2、h3 元素的文本對(duì)齊方式：
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
瀏覽器支持
所有瀏覽器都支持 text-align 屬性。
注釋?zhuān)?/span>任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
可能的值
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊。默認(rèn)值：由瀏覽器決定。 |
| right | 把文本排列到右邊。 |
| center | 把文本排列到中間。 |
| justify | 實(shí)現(xiàn)兩端對(duì)齊文本效果。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值。 |
值 justify
最后一個(gè)水平對(duì)齊屬性是 justify，它會(huì)帶來(lái)自己的一些問(wèn)題。
值 justify 可以使文本的兩端都對(duì)齊。在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。您也許已經(jīng)注意到了，兩端對(duì)齊文本在打印領(lǐng)域很常見(jiàn)。不過(guò)在 CSS 中，還需要多做些考慮。
要由用戶(hù)代理（而不是 CSS）來(lái)確定兩端對(duì)齊文本如何拉伸，以填滿(mǎn)父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會(huì)平均分布字母間的額外空間（不過(guò) CSS 規(guī)范特別指出，如果 letter-spacing 屬性指定為一個(gè)長(zhǎng)度值，“用戶(hù)代理不能進(jìn)一步增加或減少字符間的空間”）。還有一些用戶(hù)代理可能會(huì)減少某些行的空間，使文本擠得更緊密。所有這些做法都會(huì)影響元素的外觀，甚至改變其高度，這取決于用戶(hù)代理的對(duì)齊選擇影響了多少文本行。
CSS 也沒(méi)有指定應(yīng)當(dāng)如何處理連字符（注1）。大多數(shù)兩端對(duì)齊文本都使用連字符將長(zhǎng)單詞分開(kāi)放在兩行上，從而縮小單詞之間的間隔，改善文本行的外觀。不過(guò)，由于 CSS 沒(méi)有定義連字符行為，用戶(hù)代理不太可能自動(dòng)加連字符。因此，在 CSS 中，兩端對(duì)齊文本看上去沒(méi)有打印出來(lái)好看，特別是元素可能太窄，以至于每行只能放下幾個(gè)單詞。當(dāng)然，使用窄設(shè)計(jì)元素是可以的，不過(guò)要當(dāng)心相應(yīng)的缺點(diǎn)。
注1：CSS 中沒(méi)有說(shuō)明如何處理連字符，因?yàn)椴煌恼Z(yǔ)言有不同的連字符規(guī)則。規(guī)范沒(méi)有嘗試去調(diào)和這樣一些很可能不完備的規(guī)則，而是干脆不提這個(gè)問(wèn)題。
TIY 實(shí)例
- 對(duì)齊文本
- 本例演示如何對(duì)齊文本。