轉：http://www.xuebuyuan.com/825857.html
故事：
最近在使用3個span（或div）制作帶圓角邊框的按鈕時，按照常識，把span的display設置成inline-block，這樣就可以設置span的width和height了，很爽的~
可是當我在中間的span寫上文字的時候，神奇的事情發生了：
是的，寫上字的那個span掉下來了，掉落，排版錯位，很惡心的東西！使用Chrome的開發者工具查看，css和盒模型沒有半點問題，郁悶中……
仔細觀察發現，掉落的高度貌似跟文字的高度差不多，試了下，如果把文字字體加大，發現變成這樣了：
是的，有文字span向上移動了一些！也就是說，掉落的那個、有文字的span的掉落程度跟它上面的文字的大小有關系，文字的大小代表什么？大號文字的重心明顯比小號文字的重心高，於是把字體改回原來的樣子，然后試着使用vertical-align直接修改文字的重心位置為：
vertical-align:top
得到這樣的結果：
成功了！有文字的span跟沒有文字的span對齊啦！
原因：
很明顯是vertical-align設置錯誤的問題，谷歌了下vertical-align的用法，找到如下鏈接：
CSS屬性Vertical Align使用方法講解 http://www.jzxue.com/wangyesheji/css/201006/11-3937.html
大體意思是，vertical-align只用在display屬性inline或inline-block的情況下才能使用，默認為baseline，就是“display屬性inline或inline-block”的控件的底端跟文字的baseline（基線）對齊：
所以，在設置vertical-align之前，左右兩個沒有文字的span的底端跟中間那個有文字的span里的文字的基線對齊了，所以中間那個span就下降了文字高度的尺寸。而改變文字的尺寸后，基線隨之被提高，然后中間有文字的那個span也就跟着上去了。設置vertical-align:top后，左右兩邊的span的top跟中間span的top對齊，問題解決了~
順帶轉載那篇文章吧~
《CSS屬性Vertical Align使用方法講解》（轉自：http://www.jzxue.com/wangyesheji/css/201006/11-3937.html）
CSS有一個屬性叫Vertical Align。當你第一次學習它的時候會有些困惑，因此我覺得我們可以通過它的用法來了解它。最基本的用法像這樣：
img{
vertical-align: middle;
}
注意在這個應用案例中，它被應用到了img元素上。圖片通常是行內元素，意味着它通常是和文字在一起的。但是到底”在一起”確切的是什么意思？這就是Vertical-align所要解決的。
有效值為：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。
我認為最讓人使人困惑的是，當大家嘗試着給塊級元素使用vertical-align時，卻得不到任何結果。如果你有一個大一些div，其中包含一個小的div，你希望小的能夠在大的之內垂直居中對其，vertical-align沒法幫到你。Douglas Heriot有好方法來實現這種效果。
Baseline
vertical-align默認的值就是baseline（如果你沒有做任何聲明的話）。圖片會和文字以文字基線為准對其。注意下行字母降到了基線以下。圖片不會和下行字母的最下端對齊，那不是基線。
Middle
也許vertical-align的最常用的用法是給圖標大小的圖片設置為”middle”。結果有着跨瀏覽器的一致性。
瀏覽器能夠讓文字和圖片精確的對齊：
要小心如果圖片比當前文字和行高要大的話，在需要的時候它會將下面的線條向下推：
Text-bottom
和基線不同，它是文字的底端，是下行文字靠近的方向。圖片也可以很好的和它對齊。
Text-top
和text-bottom相反的就是text-top，當前文字的最高點。你也可以依次對齊。注意下面的文字，Georgia字體，最上端要比圖片高出一點。
Top和Bottom
Top和Bottom類似於text-top和text-bottom，但是他們不受文字的限制，依賴於所在行的所有東西（比如另外一張圖片）。因此如果一行有兩張圖片，不同的高度，而且都要比所在行的文字大，它們的頂端（或者底端）就會對齊，而不理會文字的大小。
Sub和Super
這兩個值的意思是上標和下標，因此元素按照這個方式對齊自身如下：
在表格中垂直對齊
不像圖片，表格默認為居中垂直對齊：
如果你希望文字與表格的頂部或者底部對齊，應用top或者bottom對齊。
當給表格應用vertical-align時，是靠頂部、底部還是居中對齊要看運氣。沒有一個值是能夠解釋的通的，不同的瀏覽器有不可預料的結果。比如，在表格中給文字應用text-bottom對齊方式時，IE6中是在底部，Safari4中是在頂部。設置為sub，IE6中是在中間，Safari4中是在頂部。
Vertical Align和Inline-Block
圖片，從理論上來說是行內元素，表現上卻像是行內塊級元素。你可以給它設置高度和寬度，它會遵守，不像其它行內元素。
給行內塊級元素應用vertical-align，表現就像如上圖片那樣，這是vertical-align是最少讓你擔心的。但是那是另外一個故事了……
不要使用縮寫
通常你會在表格中看到”valign”來實現垂直對齊。比如，<td valign=top>。需要說明的是這種縮寫是不應該使用的。真的沒有任何理由這樣使用CSS。
歡迎加入，Java，前端的共同學習【愛問共享編程部落】 479668591