css - 为什么这个标签没有垂直居中？

Question

fiddle :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. 从 img 中移除了 float: left
3. 为 img 和 #verticalcenter 添加了 display: inline-block(将放置 img 和 #verticalcenter 彼此相邻)