基本認識
（語法和取值都是從css手冊上搬過來的內容）
語法
vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默認值：baseline
適用於：內聯及 table-cell 元素
繼承性：無
動畫性：當值為 <length> 時
計算值：指定值
取值
baseline：將支持valign特性的對象的內容與基線對齊
sub：垂直對齊文本的下標
super：垂直對齊文本的上標
top：將支持valign特性的對象的內容與對象頂端對齊
text-top：將支持valign特性的對象的文本與對象頂端對齊
middle：將支持valign特性的對象的內容與對象中部對齊
bottom：將支持valign特性的對象的文本與對象底端對齊
text-bottom：將支持valign特性的對象的文本與對象頂端對齊
<percentage>：使用 "line-height" 屬性的百分比值來排列此元素，用百分比指定由基線算起的偏移量。可以為負值。基線對於百分數來說就是0%。
<length>：用長度值指定由基線算起的偏移量。可以為負值。基線對於數值來說為0。（CSS2）
ps：valign 屬性規定單元格中內容的垂直排列方式
x-height --> baseline到mean line 的高度
vertical-align家族分類
按照vertical-align的屬性值來分類，可以分為以下4類
- 線類，如 baseline（默認值）、top、middle、bottom；
- 文本類，如 text-top、text-bottom；
- 上標下標類，如 sub、super；
- 數值百分比類，如 20px、2em、20%等。
線類
top和bottom的表現都十分穩定，和當前盒子的頂端或底端對齊
但是middle的表現就有些迷了，在內聯元素中，middle的定義是：元素的垂直中心點和行框盒子基線往上 1/2 x-height 處對齊
說白了就是元素中部和容器的文本x的交叉點直線對齊
上圖盒子的高度由子元素決定，所以表現的垂直居中效果很正點
但是如果盒子高度由父元素決定，大多數情況下也是這樣
這個時候middle的表現就不那么好了，只是近似垂直居中
文本類
分別對應text-top和text-bottom，這部分就不多說了
上標、下標類
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vertical-align屬性</title> <style> div{ font-size: 60px; margin-bottom: 20px; background-color: #ccc; } sup,sub{ background-color: #99cccc; } span{ background-color: #ffcccc; font-size: 15px; } .sup span{ vertical-align: super; } .sub span{ vertical-align: sub; } </style> </head> <body> <h3>上標、下標類</h3> <div class="sup">Sphinx<sup>sup-x</sup><span>spx</span></div> <div class="sub">Sphinx<sub>sub-x</sub><span>sbx</span></div> </body> </html>
sub：內容垂直對齊文本的下標的基線
super：內容垂直對齊文本的上標的基線
對於上標、下標在參考手冊里的說明是這樣的：
上標文本將會顯示在當前文本流中字符高度的一半為基准線的上方，但是與當前文本流中文字的字體和字號都是一樣的
下標文本將會顯示在當前文本流中字符高度的一半為基准線的下方，但是與當前文本流中文字的字體和字號都是一樣的
意外的發現他倆的baseline、mean line和text-decoration的中划線表現步伐挺一致的↓↓↓
其中是不是有什么關聯也還要看text-decoration的定義了
百分比、數值類
在實例中line-height為20px，基線偏移量為200%的時候，實際上等於偏移40px
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vertical-align屬性</title> <style> div{ font-size: 60px; margin-bottom: 20px; background-color: #ccc; } span{ background-color: #ffcccc; font-size: 15px; } .z50 span{ vertical-align: 50%; } .f50 span{ vertical-align: -50%; } .l span{ vertical-align: 200%; } .z30 span{ vertical-align: 30px; } .f30 span{ vertical-align: -30px; } .l2 span{ vertical-align: 60px; } </style> </head> <body> <h3>百分比數值類</h3> <p>50%</p> <div class="z50">Sphinx<span>Sphinx</span></div> <p>-50%</p> <div class="f50">Sphinx<span>Sphinx</span></div> <p>200%</p> <div class="l">Sphinx<span>Sphinx</span></div> <p>30px</p> <div class="z30">Sphinx<span>Sphinx</span></div> <p>-30px</p> <div class="f30">Sphinx<span>Sphinx</span></div> <p>60px</p> <div class="l2">Sphinx<span>Sphinx</span></div> </body> </html>
結束
vertical-algin在table-cell中的表現就先撂着了