以前總是想要一些元素垂直居中對齊，經常用line-height，可是對於來說，line-height的表現並不理想（非常不理想）可看我的文章：line-height系列（二）
，所以得用vertical-align:middle。然而用的時候總是無效，查了資料和實踐後，終於知道vertical-align的用法了！
作用環境：父元素設定line-height。
作用物件：子元素中的inline-block和inline元素。
在父元素定義了line-height的條件下，vertical-align的作用是讓（inline/inline-block）子元素依據父元素的基點對齊。值描述
長度通過距離公升高（正值）或降低（負值）元素。'0cm'等同於'baseline'
百分值 – %
通過距離（相對於1line-height1值的百分大小）公升高（正值）或降低（負值）元素。'0%'等同於'baseline'
baseline
預設。元素的基線與父元素的基線對齊。
sub降低元素的基線到父元素合適的下標位置。
super
公升高元素的基線到父元素合適的上標位置。
top把對齊的子元素的頂端與line box頂端對齊。
text-top
把元素的頂端與父元素內容區域的頂端對齊。
middle
元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊。
bottom
把對齊的子元素的底端與line box底端對齊。
text-bottom
把元素的底端與父元素內容區域的底端對齊。
inherit
採用父元素相關屬性的相同的指定值。
數值詳解：
1. 首先關於數值，見下面的示例：
.test
元素相對於基線向下偏移兩畫素，這個常常用來修復單選框/核取方塊與12畫素文字大小不對齊的問題。
2. 再者關於百分數值，這裡的vertical-align，是相對於此標籤繼承的line-height值決定的。例如，如下示例**：
.test
假設這裡的.test的標籤繼承的行高是20px，則這裡的所代表的實際值是：-10%*20px=-2px。 ie6/ie7瀏覽器下的vertical-align的百分比值不支援小數line-height。
其他的值更多參考：張鑫旭的「我對css vertical-align的一些理解與認識（一）」
只有乙個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。
例一：inline元素作為父元素可以不設定line-height，字型會撐起乙個適合子元素作用的高度。小白點可以各種對齊。
<例二：div父元素必須設定line-height，否則對其設定vertical-align無效，不會在綠色框裡動~span
class
="box"
>
<
span
class
="dot"
>
span
> 我是一段卡哇伊的文字。
span
>
.box
.dot
>這是外層元素的內部文字
對文字設定vertical-align:top 無效是因為文字繼承了父元素的line-height，導致文字居中，要想vertical-align起作用，可在該元素上設定line-height小一些覆蓋父元素。
src="c:\users\administrator\desktop\桌面\gallery4.jpg"
style
="width:50px;vertical-align:middle;"
>
<
span
style
="vertical-align:middle"
>hahahahhah
span
>
div>
只設文字的vertical-align，則文字的中線對齊底線
只設的vertical-align，則的中線與文字的基線對齊
兩個的vertical-align都為middle，則兩個的中線互相對齊
怎麼應用vertical align，才能生效？
所以得用vertical align middle。然而用的時候總是無效，查了資料和實踐後，終於知道vertical align的用法了！作用環境 父元素設定line height。作用物件 子元素中的inline block和inline元素。在父元素定義了line height的條件下，vert...
怎麼應用vertical align，才能生效？
所以得用vertical align middle。然而用的時候總是無效，查了資料和實踐後，終於知道vertical align的用法了！作用環境 父元素設定line height。作用物件 子元素中的inline block和inline元素。在父元素定義了line height的條件下，vert...
怎麼應用vertical align，才能生效？
所以得用vertical align middle。然而用的時候總是無效，查了資料和實踐後，終於知道vertical align的用法了！作用環境 父元素設定line height。作用物件 子元素中的inline block和inline元素。在父元素定義了line height的條件下，vert...