CSS垂直對齊 - 我不理解什麼？

Question

我瞎搞與大家的喜愛CSS話題，垂直對齊方式。我發現了一個對我來說毫無意義的小案例，這可能意味着我無法理解關於CSS的一些東西。

我有以下的HTML（它是探索代碼，所以請原諒聯樣式）：

<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;"> 
    <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; display:inline-block;"> </span> 
    <span>Some text</span> 
</div> 

這將顯示一個藍色的箱子和一些文字，無論是垂直居中。但是，如果我用常規空格字符替換 ，則另一個範圍中的文本不再居中。我創建了一個演示這個的JSFiddle。

我的問題是 - 爲什麼從 更改爲一個空格字符在第一跨度改變第二範圍的垂直對齊方式？

Answer 1

您很困惑vertical-align屬性是如何工作的。 它不適用於塊級元素。當設置爲非表細胞和非內聯元素，屬性是實際應用於元素中的所有嵌入式文本，不元素本身。

當你使用一個普通的空間，空間是不實際「繪製的」瀏覽器，因爲它不是真正的內容。因此，整個盒子變成文本行（因爲你顯示它作爲內聯塊）和基線設定在對底部的黑色邊框的父母，這是最底部爲什麼文本顯示在那裏。

當您使用非換空間，空間是內容和確實得到渲染，而移動的基線文本達到文本實際上出現在藍色框內。這其實不是居中的文字。它遠沒有集中在我的屏幕上。基準線剛剛基於內容移動。您會注意到它還會更改連續文本的行高。

一個簡單的方法來解決，這是漂浮在藍色方塊左邊，然後手動設置行高文本其餘跟隨。 See the jsFiddle.

<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;"> 
    <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; float: left;"></span> 
    <span>Some text that continues on and on and on sothat you can see what is actually happening here blah blah blah blah blah</span> 
</div>​ 

Answer 2

實體 代表非破壞空間並且是空格char的變體。 他們不一樣。

其實實體防止自動換行

在wikipedia

瞭解更多關於此外，空白結果爲「空」的跨度，並且將導致「壞行爲」

Answer 3

幫忙？：

http://jsfiddle.net/mFryV/18/