text-align：start | end | left | right | center | justify | match-parent | justify-all

默認值：start

適用于：塊容器

繼承性：有

動畫性：否

計算值：指定值，除 match-parent 值外

left：

內容左對齊。

center：

內容居中對齊。

right：

內容右對齊。

justify：

內容兩端對齊，但對于強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。（CSS3）

start：

內容對齊開始邊界。（CSS3）

end：

內容對齊結束邊界。（CSS3）

match-parent：

這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 <' direction '> 值并計算的，計算值可以是 left 和 right 。（CSS3）

justify-all：

效果等同于 justify，但還會讓最后一行也兩端對齊。（CSS3）

• 塊級元素的文本是一些堆疊的線框
• 大部分瀏覽器要使得 <' text-align '> 的justify兩端對齊生效，需要在漢字間插入有空白，如空格；
• 塊內的最后一行文本（包括塊內僅有一行文本的情況，這時既是第一行也是最后一行）及被強制打斷的行，其兩端對齊需使用 <' 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中的內容都將兩端對齊

  需注意幾點：

  • 所有主流瀏覽器都支持 text-align 的 justify 屬性值；
  • text-align不處理強制打斷的行，也不處理塊內的最后一行，換句話說，如果塊內僅有一行文本（該行既是第一行也是最后一行），這時僅設置text-align:justify無法讓該行兩端對齊；
  • text-align-last 是用來處理塊內的最后一行和強制打斷的行的，所以當要設置單行文本兩端對齊時，需使用該屬性；
  • 大部分瀏覽器要使得兩端對齊生效，需在文本間插入空白，如空格（如果一行僅有2個漢字，Firefox也需在之間插入空白）；
  • 大部分瀏覽器尚不支持 text-align-last；

  依據上述的點，要實現單行兩端對齊，可以走2個方向：

  1. 由于所有瀏覽器都支持 text-align 的 justify 屬性值，但不全支持 text-align-last，我們可以對非IE及IE7以上瀏覽器使用偽對象生成額外的內容（IE7及以下瀏覽器不支持偽對象，使用text-align-last處理），置于第二行并將其隱藏，這時第一行文本（即要對齊的那個單行文本）可使用text-align:justify來對齊
  2. 支持 text-align-last 的瀏覽器，如IE, Firefox使用 text-align-last 處理，不支持的瀏覽器使用如上述方法處理；

  所以就目前情況來看，使用第一種方案是比較簡約的，可以輕易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

  查看 css兩端對齊詳解 css兩端對齊效果demo

• 對應的腳本特性為textAlign。

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持

1. 如果要使得兩端對齊生效，需要在單詞之間添加空白，如空格
2. 如果一行僅有2個漢字，較低版本的Firefox也需在之間插入空白