解讀css中的vertical-align屬性

文法：

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

參數：
baseline : 　將支援valign特性的對象的內容與基準對齊
sub : 　垂直對齊文本的下標
super : 　垂直對齊文本的上標
top : 　將支援valign特性的對象的內容與對象頂端對齊
text-top : 　將支援valign特性的對象的文本與對象頂端對齊
middle : 　將支援valign特性的對象的內容與對象中部對齊
bottom : 　將支援valign特性的對象的文本與對象底端對齊
text-bottom : 　將支援valign特性的對象的文本與對象頂端對齊
length : 　CSS2　由浮點數字和單位標識符組成的長度值 | 或者百分數。可為負數。定義由基準算起的位移量。基準對於數值來說為0，對於百分數來說就是0%。目前IE5尚不支援。請參閱長度單位

說明：

設定或檢索對象內容的垂直對其方式。
對應的指令碼特性為verticalAlign。請參閱我編寫的其他書目。

樣本：

td { vertical-align : center; }

css 為什麼給span加vertical-align: middle不起作用？

vertical-align對一些特定顯示樣式（例如儲存格顯示方式：table-cell）的元素才會起作用。所以要實現上下垂直置中對齊，可以採用如下樣式

display:table-cell;      /*按照儲存格的樣式顯示元素*/vertical-align:middle;   /*垂直置中對齊*/

上面的設定方式相比設定line-height屬性，可以相容文字有多行的情形。

下面舉例說明：

建立Html元素

<div>    <span>測試測試，即便是多行，我也還是垂直置中對齊的。</span></div>

設定css樣式

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

vertical-align: top;什麼意思

vertical-align這個是設定元素的垂直排列的.
用來定義行內元素的基準相對於該元素所在行的基準的垂直對齊.
它的值比較多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit
比如說top就是垂直對齊文本的頂部 .
在表格中,這個屬性設定儲存格內容的對齊.vertical-align應用最多的應該是在td內,控制內部對象位置.
這個屬性在各個瀏覽器中的效果都不大一樣,所以謹慎使用