行高與單行純文字的垂直居中，而如果行內含有圖片和文字，在瀏覽器內瀏覽時，讀者可以發現文字和圖片在垂直方向並不是沿中線居中，而是沿基線對齊，如圖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>元素默認為塊級元素，因此在瀏覽器內瀏覽時將不會有任何變化。而如下代碼：
<span>元素默認為行內元素，因此顯示如圖7-35所示。
圖7-35垂直對齊屬性只對行內元素有效
行內元素還包括圖片、表單輸入元素等，同時，垂直對齊不能被繼承。
7.4.2 屬性值詳解
在[7.3 行高 line-height]一節中，曾經介紹了文本的基線、頂線、中線和底線，還有內容區域、行內框和行框，而本節的垂直對齊和這幾個概念密切相關。
垂直對齊主要屬性值的表現形式如圖7-36所示。
圖7-36 垂直對齊的主要屬性值示意
1. 基線對齊（vertical-align : baseline）
基線對齊（vertical-align : baseline）使元素的基線同父元素的基線對齊，例如有如下代碼：
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）是將元素的行內框的頂端與行框的頂端對齊，例如有如下代碼：
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所示。
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>中間對齊為基線上方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所示。
圖7-43 上標和下標
上下標不會改變元素文字的尺寸大小。
8. 長度值和百分比
和上下標類似，長度值和百分比值可使元素的基線（替換元素的底端）相對於父元素的基線升高（正值）或者降低（負值）。
上下標的移動尺寸是由瀏覽器確定的，而設定長度值或者百分比，可以精確控制文字上下移動的幅度。
百分比與行高有關，例如有如下代碼，其顯示如圖7-44所示。
<p>行高2em，縱向百分比對齊：<span >100% 正數向上</span>，而<span >-100%負數向下& lt;/span>。</p>
圖7-44 百分比對齊
設置垂直對齊會影響到行框高，例如有如下代碼，其顯示如圖7-45所示。
<p>垂直對齊<span >正數向上</span& gt;，而<span >負數向下</span>。< p>行高2em，而設置垂直對齊的文字撐開了行框。</p>
圖7-45 垂直對齊對行框的影響
