将标签与背景图像对齐

Question

我创建了一个由div构成的复选框，其中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插件的一部分，该插件可以转换常规复选框，因此标签可以具有不同的字体大小。

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

我希望文字以图片的中心垂直居中

Answer 1

如果您不关心较旧的浏览器，请将float: left然后尝试使用display: inline-block; 在div.checkbox上。 之后，使用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-table-layout！@ $＃？@ $！？！类型的人之一）