1，基本屬性
(1)擂错，px和%
px是固定的像素值味滞，正值向上升高，負(fù)值向下降低钮呀，可以理解為xy坐標(biāo)系中的y坐標(biāo)剑鞍，正值向上，負(fù)值向下爽醋。
百分比單位的參考對(duì)象是line-height蚁署，計(jì)算得到的數(shù)值和px一樣定位。
(2)蚂四，top/middle/baseline(默認(rèn)值)/bottom
top是對(duì)齊子元素與父元素的line box頂部對(duì)齊
baseline是元素的基線與父元素的基線對(duì)齊
bottom是對(duì)齊子元素與父元素的line box底部對(duì)齊
(3)光戈，text-bottom/text-top
text-bottom是把元素的底端和父元素的內(nèi)容區(qū)域的底端對(duì)齊
text-top是把元素的頂端與父元素內(nèi)容區(qū)域的頂端對(duì)齊
(4)，super/sub
super是升高元素的基線到父元素的合適上標(biāo)位置
sub是降低元素的基線到父元素的合適下標(biāo)位置
2遂赠，vertical作用的前提
作用元素必須是inline或者“table-cell”元素
inline水平：
<img> <span> <i> <em> <strong> <input>
<button> <a>
table-cell：
<td>
3久妆，vertical-align與line-height之間的關(guān)系
vertical-align的百分比是以line-height為基準(zhǔn)計(jì)算的。
下面布局為一個(gè)div內(nèi)有一張圖片跷睦，無(wú)其他屬性設(shè)置筷弦。
如圖一，我們可以看出圖片與下邊緣存在間距抑诸，這個(gè)間距就是由于圖片默認(rèn)和父元素子元素基線對(duì)齊烂琴，父元素中有幽靈空白節(jié)點(diǎn)(在我的css中l(wèi)ine-height中有介紹)爹殊，需要與圖片基線對(duì)齊，所以圖片下部就會(huì)有空白奸绷。
如果我們對(duì)父元素設(shè)置line-height時(shí)边灭，由于line-height就會(huì)影響文字的位置，所以line-height變大健盒，下面空隙將會(huì)變大绒瘦，這里就不貼圖了。
4扣癣，vertical-align的baseline
一個(gè)inline-block元素惰帽，如果里面沒(méi)有inline內(nèi)聯(lián)元素，或者overflow不是visible父虑，則該元素的基線就是其margin底邊緣该酗，否則，其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線士嚎。
5,vertical-align的text-top/text-bottom
text-top和text-bottom是與父元素內(nèi)部的子元素內(nèi)容區(qū)域的頂部或者底部對(duì)齊呜魄，內(nèi)容區(qū)域我在line-height深入理解中有介紹，這里再提一下莱衩，內(nèi)容區(qū)域近似可以認(rèn)為是我們鼠標(biāo)選中字體的藍(lán)色背景部分爵嗅，而內(nèi)容區(qū)域的大小只和font-size有關(guān)，與line-height沒(méi)有任何關(guān)系笨蚁。
6,vertical-align的屬性同時(shí)起作用
(1)睹晒，top和bottom
內(nèi)容為div內(nèi)包含圖片和span標(biāo)簽
圖片vertical-align:top，文字vertical-align:top
效果如下：
圖片vertical-align:top括细，文字vertical-align:bottom
效果如下：
通過(guò)上面的兩個(gè)圖片我們可以看出伪很，vertical-align對(duì)齊的基準(zhǔn)是父元素，不會(huì)和后面的元素有關(guān)系奋单，相互是獨(dú)立的關(guān)系锉试，所以要想圖片文字中線對(duì)齊，必須同時(shí)設(shè)置圖片和文字vertical-align基線對(duì)齊览濒。
(2)呆盖，text-top和text-bottom
圖片和文字同樣text-top對(duì)齊
由于span有一個(gè)50px的行高，所以和上面有一個(gè)間距匾七，'xxxx'我們可以看做是父元素內(nèi)部元素絮短，內(nèi)容區(qū)域去圖中陰影所示江兢。
圖片是text-top對(duì)齊昨忆，span是text-bottom對(duì)齊
span有一個(gè)50px的行高，所以在對(duì)齊的時(shí)候會(huì)和下部有一個(gè)間距且與左側(cè)“xxxx”底線對(duì)齊杉允。
7邑贴，vertical-align的應(yīng)用
(1)席里，小圖片與文字對(duì)齊
圖片可能是我們用到的表情或者logo什么的，默認(rèn)基線對(duì)齊拢驾，圖片和文字不能居中顯示奖磁，我們可以通過(guò)設(shè)置vertical-align數(shù)值調(diào)整位置，也可以讓圖片和文字同時(shí)vertical-align:middle繁疤，不過(guò)這樣不兼容IE7咖为。
(2)，圖片水平垂直居中
我們讓圖片和span元素居中對(duì)齊稠腊，再給父元素設(shè)置text-align:center讓文字居中躁染，圖片會(huì)跟著文字對(duì)齊，讓span元素font-size為0架忌，讓圖片完全垂直居中吞彤。
