文章將陸續整理並更新至個人部落格。

text-align 到底能控制哪些東西呢？

上一篇文章中提到 display 屬性分成內部顯示與外部顯示，設定 display: inline-block，對於其後裔元素來說，它像是個 block 容器，對於它本身，它又像是 inline 元素，會參與 IFC 佈局，呈現水平排列。這是因為將元素設定 display: inline-block，該元素會成為 inline-level element，且同時為其後裔元素創建一個 BFC 佈局環境。這些在之後的視覺格式化文章會詳細說明。

可以想像成：

註1：W3C level 2 對於 inline-level element 的定義 為 display: inline、inline-table、inline-block 的元素，皆屬於inline-level element。而 W3C level 3 又有新增 inline-level element，可參考其 display 表格。

text-align

語法：

text-align: start | end | left | right | center | justify | justify-all 

• 預設值為 start。

• 控制 inline-level element 的對齊方式。inline-level element 可參考另一篇文章 視覺格式化模型-Box generation(中)

• 會繼承。

• 適用於「 block container 」。也就是在 inline-level element 的容器上設定 text-align 屬性，而此容器需為 block container。

註: 哪些元素屬於 inline-level element 或 block container，取決於 display 屬性，可參考 W3C 的 display 表 或是之後的視覺格式化文章會進一步說明。

例如：

<div> 預設是 block 元素，<span> 預設是 inline 元素，而 inline 元素屬於 inline-level element 之一。若要改變 <span> 裡內容的對齊方式，應對其外部容器，即 <div> 設定 text-align 屬性，而非直接對 <span> 設定。

註： <div> 預設為 display: block，由 W3C 的 display 表 可知，其會生成 block container。

<div>
  <span> span 是 inline 元素，應對其外部容器設定 text-align 屬性 </span>
</div>

/* 正確方式 */

div {
  text-align: center;
}

來看看各個屬性值的作用吧！
別忘了剛剛所提的，inline、inline-block 與 inline-table 皆為 inline-level element。

(一) start

摘自 W3C ：

Inline-level content is aligned to the start edge of the line box.

讓 inline-level 對齊 line box 的起始邊緣。
簡單來說

若書寫方向是由左至右 ⇒ 靠左對齊。
若書寫方向是由右至左 ⇒ 靠右對齊。

例如：
此範例的書寫方向為左至右，text-align: start，將靠左對齊。

(二) end

摘自 W3C：

Inline-level content is aligned to the end edge of the line box.

讓 inline-level 對齊 line box 的末端邊緣。
簡單來說

若書寫方向是由左至右 ⇒ 靠右對齊。
若書寫方向是由右至左 ⇒ 靠左對齊。

例如：
此範例的書寫方向為左至右，text-align: end 會靠右對齊。

(三) left

摘自 W3C：

Inline-level content is aligned to the line left edge of the line box.

讓 inline-level 對齊 line box 的左邊緣。
簡單來說

若書寫方向是水平 ⇒ 皆靠左對齊。

若書寫方向是由上而下 ⇒ 向頂部對齊。(可以想像把容器順時針旋轉 90°，所以原本的左邊框變成上邊框。)

(四) right

摘自 W3C：

Inline-level content is aligned to the line right edge of the line box.

讓 inline-level 對齊 line box 的右邊緣。
簡單來說

若書寫方向是水平 ⇒ 皆靠右對齊。

若書寫方向是由上而下 ⇒ 向底部對齊。(可以想像把容器順時針旋轉 90°，所以原本的右邊框變成下邊框。

(五) center

摘自 W3C：

Inline-level content is centered within the line box.

讓 inline-level 置中於 line box 裡。
簡單來說

置中。

(六) justify

僅能控制 inline 內容(例如文字)，向兩側對齊，最後一行除外。

(七) justify-all

僅能控制 inline 內容(例如文字)，文字向兩側對齊，包括最後一行。
多數瀏覽器不支援。若要單獨設定最後一行的對齊方式，可以另外使用 text-align-last 屬性。

結語

這篇文章中提到了一些常出現在 spec 上的名詞，例如 inline-level element、container box、line box 等等，這些在之後的視覺格式化模型(Visual formatting model)文章中皆有另做說明，有興趣的話可以參考，自己是在了解視覺格式化模型後，再回頭看這篇文章，發現還有很多東西可以寫進來，或是可以寫得更完善，之後有時間再更新囉！

今天就先介紹到這邊囉，對「文字」有興趣的讀者，可以追蹤 鉄人28号FX 系列文章！

參考資料

W3C-Alignment and Justification
W3C-Inline-level elements and inline boxes
MDN-text-align
MDN-Layout and the containing block
MDN-Block formatting context