vertical-align 垂直居中

基線：字母‘x’的底部；

中線：與基線的距離爲小寫字母x高度的一半（即0.5ex），而ex同font-size相關，大部分瀏覽器認爲1ex = 0.5em（em一樣也是相對單位，不是絕對單位），所以會將基線以上四分之一em處做爲中線來對齊

super 和 top 總歸不明白，而後發現super 比 top 多5px

 

可能用到vertical-align大部分狀況是以上這種佈局，但願字與圖片垂直居中

<div style="width:100%">
	<img src="../../favicon.ico" width="20"/><span style="vertical-align: middle;border:none">hahha</span>
</div>

--------------------------------------------------------------------------------------------------------------------

<div style="width:100%;height:120px;border:1px solid green;line-height: 120px;">
	<img src="/images/yeoman.png" style="vertical-align:middle"/>
</div>

　　因此說vertical-align:middle能夠上下居中是錯誤的，居中只是由於line-height:120px;

 　　咱們能夠這樣垂直居中

<div style="width:100%;height:120px;border:1px solid green;display: table">
    <div style="display: table-cell;vertical-align: middle;"><p>hahha</p><img src="../../favicon.ico"/div>
</div>

主要是配合 爺爺元素的display: table  父元素display: table-cell;vertical-align: middle;

還有一些絕對定位的垂直居中就不說了。