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

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为imgand添加#verticalcenter（将imgand#verticalcenter并排放置）

Answer 2

vertical-align: middle只能应用于表格单元格元素，您可以使用display: table-cell，但这会破坏您的布局。