爲什麼這個標籤不是垂直居中？

Question

小提琴：http://jsfiddle.net/pMZ5T/

HTML：

<div id="arrowcont"> 
    <img width="30px" height="30px" src="check.jpg" style="float:left;" /> 
    <div id="verticalcenter">Full Guide</div> 
</div> 
<br> 
<br> 

CSS：

#arrowcont { 
    height: 40px; 
    width: 275px; 
    border: 1px solid black; 
    vertical - align: middle; 
    background - position: 0 50 % ; 
} 

#verticalcenter { 
    vertical - align: middle; 
    background - position: 0 50 % ; 
}​ 

我要垂直居中這兩個這樣看起來更好，當他們是彼此相鄰。圖像實際上是旁邊的複選標記。

我知道這個問題已經被問了很多，我居然連問它的過去，但我在其他問題我不得不使用的方法，但我仍然不能垂直居中這一點。有沒有人看到我錯了哪裏？我正在嘗試背景位置標記和垂直中間標記，但都沒有工作？

Answer 1

這工作：http://jsfiddle.net/GyVSt/

我做了什麼：

1. 改變#arrowcont到display: table-cell（將允許vertical-align）
2. 刪除float: left從img
3. 新增display: inline-block爲img和#verticalcenter（會放img和#verticalcenterñ分機對方）

Answer 2

vertical-align: middle只能應用於表格單元格，您可以使用display: table-cell但在此可能會破壞您的佈局。