text-align

語法:

text-alignstart | end | left | right | center | justify | match-parent | justify-all

預設值start

適用於:塊容器

繼承性:有

動畫性:否

計算值:指定值,除 match-parent 值外

媒 體:視覺

取值:

left:
內容左對齊。
center:
內容居中對齊。
right:
內容右對齊。
justify:
內容兩端對齊,但對於強制打斷的行(被打斷的這一行)及最後一行(包括僅有一行文字的情況,因為它既是第一行也是最後一行)不做處理。(CSS3)
start:
內容對齊開始邊界。(CSS3)
end:
內容對齊結束邊界。(CSS3)
match-parent:
這個值和inherit表現一致,只是該值繼承的startend關鍵字是針對父母的direction值並計算的,計算值可以是 left 和 right 。(CSS3)
justify-all:
效果等同於justify,不同的是最後一行也會兩端對齊。(CSS3)

說明:

定義元素內容的水平對齊方式。
  • 塊級元素的文字內容是一些堆疊的線框
  • 塊內文字內容的最後一行(包括僅有一行文字的情況,這時它既是第一行也是最後一行),其兩端對齊需使用text-align-last(當瀏覽器不支援text-alignjustify-all值時);
  • IE瀏覽器下,如果text-align-last要生效,必須先定義text-alignjustify
  • 依據上述的一些描述,我們可以來實現一個兩端對齊的示例:

    單行文字兩端對齊示例:

    <div class="demo"> <p>我是誰</p> <p>你又是誰</p> <p>世界末日2012</p> </div>
    如果要實現本例中單行兩端對齊,可以這樣做:
    1. 首先,所有主流瀏覽器都支援text-alignjustify屬性值;
    2. 其次,在這個例子中每個 p 都只有一行(所以既是第一行也是最後一行),所以無法通過定義text-align: justify來實現兩端對齊,因為text-align: justify不會處理塊級內容文字的最後一行。
    3. 再次,好在有一個專門用來處理最後一行對齊的屬性text-align-last,可以通過定義text-align-last: justify來實現單行文字兩端對齊。遺憾的是,不少瀏覽器尚不支援該屬性。
    4. 綜上所述,我們無法簡單的通過使用text-align或者text-align-last來實現單行文字兩端對齊。那麼可以換個思路,想辦法讓它們變成多行文字,使用偽元素派生一行新的占位內容是個不錯的選擇,此時再實現兩端對齊,只需要text-align就行了。但是 IE7 及以下瀏覽器不支援偽元素,如果要支援的話,可以直接使用text-align-last。實現及效果如下:

    我是誰

    你又是誰

    世界末日2012

    .demo p { text-align: justify; text-align-last: justify; } .demo p::after { display: inline-block; width: 100%; height: 0; content: "\0020"; overflow: hidden; }
  • 對應的腳本特性為:textAlign

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
start | end 8.0-11.0
12.0+
justify 6.0-11.0 #1 40.0+ 4.0-40.0 #1 8.0+ 40.0+ 8.0+ 4.4-40.0 #1 28.0-40.0 #1
12.0+ 41.0+ 41.0+ 41.0+
match-parent 8.0-16.0 40.0+ 40.0-64.0 8.0-11.0 40.0-50.0 8.0-11.3 4.4-62.0 28.0-64.0
justify-all 8.0-16.0 40.0-58.0 40.0-64.0 8.0-11.0 40.0-50.0 8.0-11.3 4.4-62.0 28.0-64.0
  1. 如果要使得兩端對齊生效,需要在單詞之間增加空白,如空格

示例: