1、應(yīng)有前提岩调，display是：
(1 inline水平
<img><span><strong><em>等 写隶， inline-block中的<input><button>等
(2 ‘table-cell’元素 （單元格屬性）
2衣式、display可以更改元素的顯示水平：
（1 直接把vertical-align:middle設(shè)置在屬性中
3糙箍、CSS聲明也可以間接更改display水平
（1 元素如果用了浮動(dòng)（float）就會(huì)變成block水平了渤愁，就不在一個(gè)inline里面了
（2 元素如果用了絕對(duì)定位（position:absolute）也會(huì)變成block
4、遇到圖片外面下基線存在空白深夯，可以拆分line-height和vertical-align的關(guān)系抖格。
比如： line-height:0; vertical-align:top;
5、（vertical-align線性類屬性值中的top\bottom\middle）
(1)一般我們的垂直居中都是近似咕晋，原因是元素垂直中心點(diǎn)和父級(jí)基線上1/2x-height對(duì)齊雹拄，要想完全居中，可以設(shè)置：
font-size:0
(2)不過table-cell中的比較簡(jiǎn)單掌呜，設(shè)置垂直居中即可
6滓玖、（vertical-align的文本類屬性值：text-top text-bottom）
盒子的頂部（底部）和父級(jí)的content area的頂部（底部）對(duì)齊
不受行高line-height和其他內(nèi)聯(lián)元素影響，
適用場(chǎng)景：圖文混排等
7质蕉、（vertical-align的上標(biāo)和下標(biāo)）
對(duì)應(yīng)：vertical-align:super 提高盒子的基線到父級(jí)合適的上標(biāo)基線位置
vertical-align:sub 降低盒子的基線到父級(jí)合適的下標(biāo)基線位置
例如：
XX書<sup> [1]</sup> NH<sub>3</sub>HCO<sub>4</sub>
8势篡、總結(jié)解決問題經(jīng)驗(yàn)：
（1）5中我們?cè)O(shè)置font-size:0并不是萬(wàn)全之策，如果圖片后面也要跟文字模暗，那就同樣設(shè)置vertical-align:middle
(2)小圖標(biāo)和文字的對(duì)齊：針對(duì)兼容性問題和效果有時(shí)候不明顯禁悠，可以通過設(shè)置vertical-align負(fù)值
（3）不定尺寸圖片或者多行文字的垂直居中：
［主體元素inline-block;輔助元素設(shè)置寬度為0且高度100%;主體和輔助元素都設(shè)置為vertical-align:middle］
例如：<p style='height:100px;'><img src='1.jpg'><i></i></p> [其中img是主體元素，i是額外添加的輔助元素]
我們可以這樣設(shè)置樣式：
img{vertical-align:middle}
i{display:inline-block;height:100%;vertical-align:middle}
