vertical-align 的使用
以前總是想要一些元素垂直居中對齊，經常用line-height，可是對于圖片來說，line-height的表現并不理想（非常不理想）可看我的文章：line-height系列（二），所以得用vertical-align:middle。然而用的時候總是無效，查了資料和實踐后，終于知道vertical-align的用法了！
作用環(huán)境：父元素設置line-height。
作用對象：子元素中的inline-block和inline元素。
一、當父元素設置了line-height
父元素（inline-block\block）必須含有l(wèi)ine-height（inline元素有無皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。
vertical-align不可繼承，必須對子元素單獨設置。
數值詳解：
首先關于數值，見下面的示例：
.test{vertical-align:-2px;}
元素相對于基線向下偏移兩像素，這個常常用來修復單選框/復選框與12像素文字大小不對齊的問題。再者關于百分數值，這里的vertical-align，是相對于此標簽繼承的line-height值決定的。例如，如下示例代碼：
.test{vertical-align:-10%;}
假設這里的.test的標簽繼承的行高是20px，則這里的所代表的實際值是：-10%*20px=-2px。 IE6/IE7瀏覽器下的vertical-align的百分比值不支持小數line-height。
其他的值更多參考：張鑫旭的“我對CSS vertical-align的一些理解與認識（一）”
關于作用環(huán)境——
只有一個元素屬于inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。
所謂inline-block水平的元素，即可以與inline水平元素混排，又能設置高寬屬性的元素，例如圖片，按鈕，單復選框，單行/多行文本框等HTML控件，只有這些元素默認情況下會對vertical-align屬性起作用。
對inline元素設置vertical-align是有作用的，只是要重新設置line-height的值，否則繼承了父元素的line-height只能垂直居中。
例一：inline元素作為父元素可以不設置line-height，字體會撐起一個適合子元素作用的高度。小白點可以各種對齊。
<span class="box"> <span class="dot"></span> 我是一段卡哇伊的文字。 </span>.box{background:black; color:white; padding-left:20px;} .dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}
例二：div父元素必須設置line-height，否則對其設置vertical-align無效，圖片不會在綠色框里動~
<div class="outerbox">
<span>這是外層元素的內部文字</span></div>.outerbox{width:300px; line-height: 300px;font-size: 16px; }.outerbox img{width: 30px; height:30px; vertical-align: bottom;}.outerbox span{vertical-align: top;}
對文字設置vertical-align:top 無效是因為文字繼承了父元素的line-height，導致文字居中，要想vertical-align起作用，可在該元素上設置line-height小一些覆蓋父元素。
二、當父元素沒有設置line-height時，inline/inline-block子元素之間對齊。
當父元素沒有設置line-height時，只對行內元素的兄弟元素對齊有用，無法子元素居中對齊父元素。
設置了vertical-align:middle的子元素的中線與兄弟元素的基線對齊。若兄弟元素都設置該項，則居中對齊。
例：黃色的線為圖片中垂線。
只設文字的vertical-align，則文字的中線對齊圖片底線
只設圖片的vertical-align，則圖片的中線與文字的基線對齊
兩個的vertical-align都為middle，則兩個的中線互相對齊
2017-01-20
