早上一個同僚提出了一個問題，下面這句html元素中的文本為什麼不能垂直居中。
<span style="height:60px;vertical-align: middle; background-color: #1c93b7;">
dddddddda</span>
我用浏覽器試了一下，它的展示圖如下：
vertical-align聲明在很多中文文檔中解釋是“決定元素在垂直位置的顯示”，它有下面幾個參數baseline | sub | super | top | text-top | middle | bottom | text-bottom |
baseline：與元素的基線對齊。
middle：與元素中部對齊。
sub：字下沉。
super：字上升。
text-top：文本頂部對齊。
text-bottom：文本底部對齊。
top：和本行位置最高元素對齊。
bottom：和本行位置最低元素對齊。
如果按照字面意思了解vertical-align:middle就應該是文字在元素的垂直位置的最中央，把入前面那個 标簽中，它的位置應該在一個height為60px的box的中央啊。但是事實上不是這樣的。
如果這個vertical-align:middle用來定義一個單元格td，那麼它和你想像的一樣起作用，看看下面的例子
<tr>
<td style="height:80px;vertical-align:middle" οnmοuseοver="this.style.verticalAlign='bottom'"
οnmοuseοut="this.style.verticalAlign='middle'">
text to align</td>
</tr>
</table>
通過mouse over和out事件，我們動态的改變文字的垂直對齊位置，它确實按照你的做法工作。在msdn的文檔中我發現它是可以做用于span元素的，但是沒有詳細解釋vertical-align是怎麼工作的。
後來在《CSS20 Programmer’s Reference》（注1）查了查，Page12的The Inline Layout Model小節說明了行内布局的模型。這裡有一個模型圖。這段文字說明了在一行文字布局中，vertical-align是用來影響不同元素的對齊位置 的。
W3C官方對vertical-align做了下面的解釋：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
實際上，一個Box中由很多行很多元素組成，vertical-align隻作用于在同一行内的元素，它的垂直并不是相對于整個Box而言的。前面那個 span定義了一個60px的高度，但是這個span的Box中存在很多行，那段文本并不能對齊到span的中央。是以希望那段文本對齊span的中行， 需要給它定義一個line-height的屬性，讓line-height為60px，作用于一行的vertical-align就按你的想法工作了。
table的單元格，因為是一行内的元素，是以vertical-align按照我們的想法來工作，但是在span中并不是這樣的。
注1、《CSS20 Programmer's Reference》，作者Eric A. Meyer，一本CSS20的程式設計參考手冊。