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

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只能应用于table-cell元素，您可以使用display: table-cell，但这可能会破坏您的布局。