为什么这个标签不是垂直居中？

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但在此可能会破坏您的布局。