将标签与背景图像对齐

Question

我创建了一个由带有复选框图像背景和标签的div构成的复选框。

Html：

<div class="checkbox checked" ></div>
<label class="label">Some text</label>

和css：

.checkbox
{
    height: 16px;
    width: 16px;
    float:left;
    background: url(http://cdn1.iconfinder.com/data/icons/uidesignicons/checkbox_yes.png) no-repeat 0px 0px;
}

问题是 - 标签没有与图像对齐，它位于图像div基线的下方，看起来很丑。你可以在这里看到它的jsfiddle：http://jsfiddle.net/muzzzy/3hUGV/5/

我如何对齐它们，因为我无法为padding或line-height指定绝对值，因为这实际上是转换常规复选框的javascript插件的一部分，因此标签可以是不同的字体大小。 / p>

更新：我现在还要包括它的外观图像：

我希望文本与图像的中心垂直居中

Answer 1

如果您不关心旧浏览器，请删除float: left并尝试在div.checkbox上使用display: inline-block;。之后，使用vertical-align属性进行播放。

然后做一些跨浏览器，因为对于我们中的一些人来说它看起来还不错！

这是实例：http://jsfiddle.net/karameloso/hQ2uK/

Answer 2

最好将div.checkbox替换为span，然后将span设置为display:inline-block。这样，你可以在元素上使用vertical-align:middle来使它们居中（只有极少数情况下vertical-align有用！）

JS小提琴：http://jsfiddle.net/3hUGV/34/

Answer 3

对于你要问的问题，请尝试一下表：http://jsfiddle.net/3rRb6/

（除非你当然是其中一个 omg-im-not-using-a-table-for-layout！@ $＃？@ $！？！类型的人）