Dynamic HTML權威指南（讀書筆記）— 第一章 HTML與XHTML參考

 

1. 對齊常量（text-align和vertical-align）

1.1 盒外對齊

這種對齊屬性決定環繞着元素外部矩形空間的文本對齊方式。W3C中，這類HTML元素包括：applet、iframe、img、input和object。IE還支持embed、fieldset和select，但不支持iframe元素。如下是受到普遍支持的元素對齊屬性：

absbottom：使文本的最底端與元素的最底端保持在同一水平線上。

absmiddle：使文本高度的中部與元素高度的中部水平對齊。

abseline：文本的基線與元素最下端水平對齊。注意，文本的下行筆畫位於基線如下。

bottom：W3C承認的值，與abseline等同。

left：若是元素所在行以前已經有文本存在，則該元素會移動至下一行，並顯示在相鄰的最外層容器的左側。元素以後的文本將緊跟着元素以前的文本，使得整段文本環繞在對象或圖像的周圍（這種效果稱爲浮動）。W3C承認的值。

middle：文本的基線與元素高度的中央對齊。W3C承認的值。

right：若是元素所在行以前已經有文本存在，則該元素會移動至下一行，並顯示在相鄰的最外層容器的右側。元素以後的文本將緊跟着元素以前的文本，使得整段文本環繞在對象或圖像的周圍（這種效果稱爲浮動）。W3C承認的值。

texttop：元素的最上邊與其前面的文本的上行筆畫位於同一水平線。

top：元素的最上邊與同一行中最高的元素（文本或其餘元素）上邊界對齊。W3C承認的值。

1.2 容器盒內文本對齊

bottom：文本底部與相關元素底部對齊，或位於該元素盒下邊。瀏覽器只會針對caption元素執行這種對齊方式。

center：文本位於相關元素盒的頂部或上部，並水平居中。雖然此值並未被W3C所承認，但如今的瀏覽器依然支持在caption元素使用該屬性，但legend元素在Safari或Opera中則沒法使用該屬性。

left：雖然W3C承認此值（這個值代表文本應該位於容器元素的左側），但對於legend元素而言，瀏覽器將文本對齊在盒子的左上部。而對於caption元素，只有Mozilla瀏覽器會將標題本文放在元素左邊。

right：雖然W3C承認此值（這個值代表文本應該位於容器元素的右側），但對於legend元素而言，瀏覽器將文本對齊在盒子的右上部。而對於caption元素，只有Mozilla瀏覽器會將標題本文放在元素右邊。

top：legend元素的文本將在容器盒的左上部對齊，而caption元素的文本將在中上部對齊。這是W3C承認的值。