2008年07月2日
圖7-34 文字和圖片內容默認垂直對齊方式爲基線對齊
上一小節講解了行高與單行純文字的垂直居中，而如果行內含有圖片和文字，在瀏覽器內瀏覽時，讀者可以發現文字和圖片在垂直方向並不是沿中線居中，而是沿基線對齊，如圖7-34所示。
這是因爲，元素默認的垂直對齊方式爲基線對齊（vertical-align: baseline）。
7.4.1 語法
- vertical-align
-
- 語法：
- vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <長度> | inherit
- 說明：
- 設置元素內容的垂直對齊方式。
- 參數：
-
- baseline：
- 基線對齊；
- sub：
- 下標；
- super：
- 上標；
- top：
- 頂端對齊；
- text-top：
- 與文本的頂端對齊；
- middle：
- 中部對齊；
- bottom：
- 底端對齊；
- text-bottom：
- 文本的底端對齊；
- 百分比和長度：
- CSS2，可爲負數。
- 初始值：
- baseline
- 繼承性：
- 不繼承
- 適用於：
- 行內元素和單元格（table-cell）元素
- 媒體：
- 視覺
- 計算值：
- 百分比和長度值爲絕對長度；其他同指定值。
此處需要特別注意的是：垂直對齊屬性只對行內元素有效。例如有如下代碼：
<p style=”vertical-align:super;”>垂直對齊<span>上標</span></p><p>元素默認爲塊級元素，因此在瀏覽器內瀏覽時將不會有任何變化。而如下代碼：
<p>垂直對齊<span style="vertical-align:super;">上標</span></p><span>元素默認爲行內元素，因此顯示如圖7-35所示。
圖7-35垂直對齊屬性只對行內元素有效
行內元素還包括圖片、表單輸入元素等，同時，垂直對齊不能被繼承。
7.4.2 屬性值詳解
在[7.3 行高 line-height]一節中，曾經介紹了文本的基線、頂線、中線和底線，還有內容區域、行內框和行框，而本節的垂直對齊和這幾個概念密切相關。
圖7-36 垂直對齊的主要屬性值示意
垂直對齊主要屬性值的表現形式如圖7-36所示。
1. 基線對齊（vertical-align : baseline）
基線對齊（vertical-align : baseline）使元素的基線同父元素的基線對齊，例如有如下代碼：
p strong {
line-height : 7em;
font-size : 2em;
vertical-align : baseline;
}<p>基線對齊<strong>vertical-align:baseline;</strong></p>
圖7-37 基線對齊
則其顯示如圖7-37所示。
而像圖片或者輸入框這樣的元素，本身沒有基線，則將其底端同父元素的基線對齊，如圖7-34所示。
2. 頂端對齊（vertical-align : top）
頂端對齊（vertical-align : top）是將元素的行內框的頂端與行框的頂端對齊，例如有如下代碼：
p {
line-height : 7em;
}
p strong {
vertical-align:top;
line-height:2em;
}
p img {
vertical-align : top;
}<p>頂端對齊：<strong>vertical-align:top;</strong><img src="img/ddcat_anim.gif" alt="圖片" width="88" height="31" /></p>則其顯示如圖7-38所示。
圖7-38 頂端對齊
對於<strong>元素，不僅設定了vertical-align，還設定了line-height，這是因爲在本章[7.3.2 內容區域、行內框和行框]一節中關於行內框的說明中介紹過，行高可以改變行內框的高度，如果不重新設定行高，則<strong>元素繼承了父元素<p>的行高，因此行內框高和行框的高度是一樣的，則頂端對齊將看不出效果。
3. 文本頂端對齊（vertical-align : text-top）
文本頂端對齊（vertical-align : text-top）是將元素行內框的頂端同文本行的頂線對齊，例如有如下代碼，其顯示如圖7-39所示。
p {
line-height : 7em;
}
p strong {
vertical-align : text-top;
line-height : 2em;
}
p img {
vertical-align : text-top;
}<p>文本頂端對齊：<strong> vertical-align:top;</strong><img src="img/ddcat_anim.gif" alt="圖片" width="88" height="31" /></p>
圖7-39 文本頂端對齊
4. 底端對齊（vertical-align : bottom）
底端對齊（vertical-align : bottom）與頂端對齊（vertical-align : top）相反，如圖7-40所示。
圖7-40 底端對齊
5. 文本底端對齊（vertical-align : text-bottom）
文本底端對齊（vertical-align : text-bottom）與文本頂端對齊（vertical-align : text-top）相反，如圖7-41所示。
圖7-41 文本底端對齊
6. 中間對齊（vertical-align : middle）
中間對齊（vertical-align : middle）通常使用在圖片上，將圖片的垂直方向的中線與文本行的中線對齊，例如有XHTML代碼如下，其顯示如圖7-42所示。
p img { vertical-align : middle; }<p>中間對齊爲基線上方0.5ex處<img src="img/ddcat_ad.gif" alt="圖片" width="180" height="60" /></p>
圖7-42 中間對齊
中線的定義爲：中線位於基線的上方，與基線的距離爲小寫字母x高度（即ex）的一半，如圖7-36所示。而ex同字體尺寸相關，大部分瀏覽器認爲1ex = 0.5em，因此會將基線以上四分之一em處作爲中線來對齊。
7. 上標和下標
上標（vertical-align:super）使元素的基線（替換元素的底端）相對於父元素的基線升高，下標（vertical-align:sub）使元素的基線降低，移動的幅度CSS規範中沒有規定，由瀏覽器來決定。例如有如下代碼，其顯示如圖7-43所示。
<p>上標文字<span style="vertical-align:super;">vertical-align:super;</span>下標文字<span style="vertical-align:sub;">vertical-align:sub;</span></p>
圖7-43 上標和下標
上下標不會改變元素文字的尺寸大小。
8. 長度值和百分比
和上下標類似，長度值和百分比值可使元素的基線（替換元素的底端）相對於父元素的基線升高（正值）或者降低（負值）。
上下標的移動尺寸是由瀏覽器確定的，而設定長度值或者百分比，可以精確控制文字上下移動的幅度。
百分比與行高有關，例如有如下代碼，其顯示如圖7-44所示。
p { line-height : 2em; }<p>行高2em，縱向百分比對齊：<span style="vertical-align:100%;">100%正數向上</span>，而<span style="vertical-align:-100%;">-100%負數向下</span>。</p>
圖7-44 百分比對齊
設置垂直對齊會影響到行框高，例如有如下代碼，其顯示如圖7-45所示。
p { line-height : 2em; }<p>垂直對齊<span style="vertical-align:2em;">正數向上</span>，而<span style="vertical-align:-2em;">負數向下</span>。<p>行高2em，而設置垂直對齊的文字撐開了行框。</p>
圖7-45 垂直對齊對行框的影響
圖7-46 IE中的疊加混亂