[TOC] # 簡介 元素默認的垂直對齊方式為**基線對齊**（vertical-align: baseline）。 [深入理解css中vertical-align屬性](https://www.cnblogs.com/starof/p/4512284.html) # 語法 | 值 | 說明 | | --- | --- | | baseline | 基線對齊 | | sub | 下標 | | super | 上標 | | top | 頂端對齊 | | text-top | 與文本的頂端對齊 | | middle | 中部對齊 | | bottom | 底端對齊 | | text-bottom | 文本的底端對齊 | | 百分比和長度 | CSS2，可為負數。 | 特別注意的是：**垂直對齊屬性只對行內元素有效**。 例如有如下代碼： `<p style=”vertical-align:super;”>垂直對齊<span>上標</span></p>` `<p>`元素默認為塊級元素，因此在瀏覽器內瀏覽時將不會有任何變化。而如下代碼： `<p>垂直對齊<span style="vertical-align:super;">上標</span></p>` `<span>`元素默認為行內元素，因此顯示如圖所示。  行內元素還包括圖片、表單輸入元素等，同時，垂直對齊不能被繼承。 # 屬性值詳解  ## 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-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> ~~~  對于`<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> ~~~  ## 4. 底端對齊（vertical-align : bottom） 底端對齊（vertical-align : bottom）與頂端對齊（vertical-align : top）相反，如圖所示。  ## 5. 文本底端對齊（vertical-align : text-bottom） 文本底端對齊（vertical-align : text-bottom）與文本頂端對齊（vertical-align : text-top）相反，如圖所示。  ## 6. 中間對齊（vertical-align : middle） 　　中間對齊（vertical-align : middle）通常使用在圖片上，將圖片的垂直方向的中線與文本行的中線對齊，例如有XHTML代碼如下，其顯示如圖所示。 ~~~ p img { vertical-align : middle; } <p>中間對齊為基線上方0.5ex處<img src="img/ddcat_ad.gif" alt="圖片" width="180" height="60" /></p> ~~~  　　中線的定義為：中線位于基線的上方，與基線的距離為小寫字母x高度（即ex）的一半，如圖所示。而ex同字體尺寸相關，大部分瀏覽器認為1ex = 0.5em，因此會將基線以上四分之一em處作為中線來對齊。 注意：同在行高顯示上的差別一樣，在中間對齊上，各瀏覽器之間也稍有些差異。 ## 7. 上標和下標 　　上標（vertical-align:super）使元素的基線（替換元素的底端）相對于父元素的基線升高，下標（vertical-align:sub）使元素的基線降低，**移動的幅度CSS規范中沒有規定，由瀏覽器來決定**。例如有如下代碼，其顯示如圖所示。 `<p>上標文字<span style="vertical-align:super;">vertical-align:super;</span>下標文字<span style="vertical-align:sub;">vertical-align:sub;</span></p>`  上下標不會改變元素文字的尺寸大小。 ## 8. 長度值和百分比 　　和上下標類似，長度值和百分比值可使元素的基線（替換元素的底端）相對于父元素的基線升高（正值）或者降低（負值）。 上下標的移動尺寸是由瀏覽器確定的，而設定長度值或者百分比，可以精確控制文字上下移動的幅度。 百分比與行高有關，例如有如下代碼，其顯示如圖所示。 ~~~ p { line-height : 2em; } <p>行高2em，縱向百分比對齊：<span style="vertical-align:100%;">100%正數向上</span>，而<span style="vertical-align:-100%;">-100%負數向下</span>。</p> ~~~  設置垂直對齊會影響到行框高，例如有如下代碼，其顯示如圖所示。 ~~~ p { line-height : 2em; } <p>垂直對齊<span style="vertical-align:2em;">正數向上</span>，而<span style="vertical-align:-2em;">負數向下</span>。&lt;p&gt;行高2em，而設置垂直對齊的文字撐開了行框。</p> ~~~  **注意：**在IE中設定百分比或者數值對齊會造成內容的疊加混亂，如圖所示。  # refs http://www.ddcat.net/blog/?p=233 https://www.cnblogs.com/starof/p/4512284.html