?
This document uses PHP Chinese website manual Release
語(yǔ)法：
text-align：start|end| left | right | center |justify|match-parent|justify-all
默認(rèn)值：start
適用于：塊容器
繼承性：有
動(dòng)畫(huà)性：否
計(jì)算值：指定值，除 match-parent 值外
取值：
left：內(nèi)容左對(duì)齊。
center：內(nèi)容居中對(duì)齊。
right：內(nèi)容右對(duì)齊。
justify：內(nèi)容兩端對(duì)齊，但對(duì)于強(qiáng)制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因?yàn)樗仁堑谝恍幸彩亲詈笠恍校┎蛔鎏幚?。（CSS3）
start：內(nèi)容對(duì)齊開(kāi)始邊界。（CSS3）
end：內(nèi)容對(duì)齊結(jié)束邊界。（CSS3）
match-parent：這個(gè)值和 inherit 表現(xiàn)一致，只是該值繼承的 start 或 end 關(guān)鍵字是針對(duì)父母的 <' direction '> 值并計(jì)算的，計(jì)算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于 justify，但還會(huì)讓最后一行也兩端對(duì)齊。（CSS3）
說(shuō)明：
塊級(jí)元素的文本是一些堆疊的線框
大部分瀏覽器要使得 <' text-align '> 的
justify兩端對(duì)齊生效，需要在漢字間插入有空白，如空格；塊內(nèi)的最后一行文本（包括塊內(nèi)僅有一行文本的情況，這時(shí)既是第一行也是最后一行）及被強(qiáng)制打斷的行，其兩端對(duì)齊需使用 <' text-align-last '>；
IE瀏覽器下，如果 <' text-align-last '> 要生效，必須先定義 <' text-align '> 為
justify；單行兩端對(duì)齊效果變得比較簡(jiǎn)單：
css code：
li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;} li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}html code：
<ul> <li>我 是 誰(shuí)</li> <li>你 又 是 誰(shuí)</li> <li>世 界 末 日 2012</li> </ul>
以上代碼3個(gè)li中的內(nèi)容都將兩端對(duì)齊
需注意幾點(diǎn)：依據(jù)上述的點(diǎn)，要實(shí)現(xiàn)單行兩端對(duì)齊，可以走2個(gè)方向：所以就目前情況來(lái)看，使用第一種方案是比較簡(jiǎn)約的，可以輕易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera
查看 css兩端對(duì)齊詳解 css兩端對(duì)齊效果demo
所有主流瀏覽器都支持 text-align 的 justify 屬性值；
text-align不處理強(qiáng)制打斷的行，也不處理塊內(nèi)的最后一行，換句話說(shuō)，如果塊內(nèi)僅有一行文本（該行既是第一行也是最后一行），這時(shí)僅設(shè)置text-align:justify無(wú)法讓該行兩端對(duì)齊；
text-align-last 是用來(lái)處理塊內(nèi)的最后一行和強(qiáng)制打斷的行的，所以當(dāng)要設(shè)置單行文本兩端對(duì)齊時(shí)，需使用該屬性；
大部分瀏覽器要使得兩端對(duì)齊生效，需在文本間插入空白，如空格（如果一行僅有2個(gè)漢字，F(xiàn)irefox也需在之間插入空白）；
大部分瀏覽器尚不支持 text-align-last；
由于所有瀏覽器都支持 text-align 的 justify 屬性值，但不全支持 text-align-last，我們可以對(duì)非IE及IE7以上瀏覽器使用偽對(duì)象生成額外的內(nèi)容（IE7及以下瀏覽器不支持偽對(duì)象，使用text-align-last處理），置于第二行并將其隱藏，這時(shí)第一行文本（即要對(duì)齊的那個(gè)單行文本）可使用text-align:justify來(lái)對(duì)齊
支持 text-align-last 的瀏覽器，如IE, Firefox使用 text-align-last 處理，不支持的瀏覽器使用如上述方法處理；
對(duì)應(yīng)的腳本特性為textAlign。
兼容性：
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
| start | 6.0-11.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
| end | 6.0-11.0 | 2.0-3.5 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
| 3.6+ | ||||||||
| justify | 6.0-11.0 #1 | 2.0+ #2 | 4.0-40.0 #1 | 6.0+ | 15.0-27.0 #1 | 6.0+ | 2.1-4.4.4 #1 | 18.0-39.0 #1 |
| 41.0+ | 28.0+ | 40.0+ | ||||||
| match-parent | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0 |
| justify-all | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0 |
如果要使得兩端對(duì)齊生效，需要在單詞之間添加空白，如空格
如果一行僅有2個(gè)漢字，較低版本的Firefox也需在之間插入空白
示例：
實(shí)例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>text-align_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test p{border:1px solid #000;}
.left p{text-align:left;}
.center p{text-align:center;}
.right p{text-align:right;}
.justify p{width:200px;text-align:justify;}
.start p{text-align:start;}
.end p{text-align:end;}
</style>
</head>
<body>
<ul class="test">
<li class="left">
<strong>left</strong>
<p>我是左對(duì)齊內(nèi)容</p>
</li>
<li class="center">
<strong>center</strong>
<p>我是居中對(duì)齊內(nèi)容</p>
</li>
<li class="right">
<strong>right</strong>
<p>我是右對(duì)齊內(nèi)容</p>
</li>
<li class="justify">
<strong>justify</strong>
<p>我 是一段可以兩端對(duì)齊的文字， 你 仔細(xì)看看， 我 的對(duì)齊方式都貼著 容器左右的邊緣。</p>
</li>
<li class="start">
<strong>start</strong>
<p>start效果</p>
</li>
<li class="end">
<strong>end</strong>
<p>end效果</p>
</li>
</ul>
</body>
</html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例