iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
2
自我挑戰組

前端新手進化史系列 第 8

text-align

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


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

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

可以想像成:

註1:W3C level 2 對於 inline-level element 的定義display: inlineinline-tableinline-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;
}


來看看各個屬性值的作用吧!
別忘了剛剛所提的,inlineinline-blockinline-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 系列文章!/images/emoticon/emoticon34.gif

參考資料

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


上一篇
混血兒 inline-block
下一篇
番外篇 - 胡搞 box-shadow(上)
系列文
前端新手進化史30

1 則留言

0
letter liu
iT邦新手 5 級 ‧ 2019-09-25 22:22:05

得謝。棒棒~~

yachen iT邦新手 5 級 ‧ 2019-09-26 21:36:04 檢舉

/images/emoticon/emoticon58.gif

我要留言

立即登入留言