css 爲何給span加vertical-align: middle不起做用？

vertical-align是什麼意思？先舉個例子！

 

這句html元素中的文本爲何不能垂直居中。

<style>

span{ height:60px;vertical-align: middle; #1c93b7;

}

</style><span >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" onmouseover="this.style.verticalAlign='bottom'" onmouseout="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的編程參考手冊。

還有：

vertical-align對一些特定顯示樣式（例如單元格顯示方式：table-cell）的元素纔會起做用。因此要實現上下垂直居中對齊，能夠採用以下樣式

1 2	display : table-cell ;       /*按照單元格的樣式顯示元素*/ vertical-align : middle ;    /*垂直居中對齊*/

• 上面的設置方式相比設置line-height屬性，能夠兼容文字有多行的情形。

下面舉例說明：

1. 建立Html元素

   1 2 3

   < div >      < span >測試測試，即使是多行，我也仍是垂直居中對齊的。</ span > </ div >

2. 設置css樣式

   1	div{  width : 200px ;  height : 115px ;  border : 4px  solid  #ebcbbe ;  display : table-cell ; vertical-align :  middle ;

3. 觀察顯示效果

ref: https://zhidao.baidu.com/question/455636351.html