?
This document uses PHP Chinese website manual Release
語法：
text-align：start|end| left | right | center |justify|match-parent|justify-all
默認值：start
適用于：塊容器
繼承性：有
動畫性：否
計算值：指定值，除 match-parent 值外
取值：
left：內(nèi)容左對齊。
center：內(nèi)容居中對齊。
right：內(nèi)容右對齊。
justify：內(nèi)容兩端對齊，但對于強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。（CSS3）
start：內(nèi)容對齊開始邊界。（CSS3）
end：內(nèi)容對齊結(jié)束邊界。（CSS3）
match-parent：這個值和 inherit 表現(xiàn)一致，只是該值繼承的 start 或 end 關(guān)鍵字是針對父母的 <' direction '> 值并計算的，計算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于 justify，但還會讓最后一行也兩端對齊。（CSS3）
說明：
塊級元素的文本是一些堆疊的線框
大部分瀏覽器要使得 <' text-align '> 的
justify兩端對齊生效，需要在漢字間插入有空白，如空格；塊內(nèi)的最后一行文本（包括塊內(nèi)僅有一行文本的情況，這時既是第一行也是最后一行）及被強制打斷的行，其兩端對齊需使用 <' text-align-last '>；
IE瀏覽器下，如果 <' text-align-last '> 要生效，必須先定義 <' text-align '> 為
justify；單行兩端對齊效果變得比較簡單：
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>我 是 誰</li> <li>你 又 是 誰</li> <li>世 界 末 日 2012</li> </ul>
以上代碼3個li中的內(nèi)容都將兩端對齊
需注意幾點：依據(jù)上述的點，要實現(xiàn)單行兩端對齊，可以走2個方向：所以就目前情況來看，使用第一種方案是比較簡約的，可以輕易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera
查看 css兩端對齊詳解 css兩端對齊效果demo
所有主流瀏覽器都支持 text-align 的 justify 屬性值；
text-align不處理強制打斷的行，也不處理塊內(nèi)的最后一行，換句話說，如果塊內(nèi)僅有一行文本（該行既是第一行也是最后一行），這時僅設(shè)置text-align:justify無法讓該行兩端對齊；
text-align-last 是用來處理塊內(nèi)的最后一行和強制打斷的行的，所以當要設(shè)置單行文本兩端對齊時，需使用該屬性；
大部分瀏覽器要使得兩端對齊生效，需在文本間插入空白，如空格（如果一行僅有2個漢字，F(xiàn)irefox也需在之間插入空白）；
大部分瀏覽器尚不支持 text-align-last；
由于所有瀏覽器都支持 text-align 的 justify 屬性值，但不全支持 text-align-last，我們可以對非IE及IE7以上瀏覽器使用偽對象生成額外的內(nèi)容（IE7及以下瀏覽器不支持偽對象，使用text-align-last處理），置于第二行并將其隱藏，這時第一行文本（即要對齊的那個單行文本）可使用text-align:justify來對齊
支持 text-align-last 的瀏覽器，如IE, Firefox使用 text-align-last 處理，不支持的瀏覽器使用如上述方法處理；
對應(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 |
如果要使得兩端對齊生效，需要在單詞之間添加空白，如空格
如果一行僅有2個漢字，較低版本的Firefox也需在之間插入空白
示例：
實例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>text-align_CSS參考手冊_web前端開發(fā)參考手冊系列</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>我是左對齊內(nèi)容</p>
</li>
<li class="center">
<strong>center</strong>
<p>我是居中對齊內(nèi)容</p>
</li>
<li class="right">
<strong>right</strong>
<p>我是右對齊內(nèi)容</p>
</li>
<li class="justify">
<strong>justify</strong>
<p>我 是一段可以兩端對齊的文字， 你 仔細看看， 我 的對齊方式都貼著 容器左右的邊緣。</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>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例