将标签与背景图像对齐答案

【问题标题】：Aligning label with a background image将标签与背景图像对齐
【发布时间】：2011-10-20 04:15:07
【问题描述】：

我创建了一个由带有复选框图像背景和标签的 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/

鉴于我无法指定填充或行高的绝对值，我该如何对齐它们，因为这实际上是转换常规复选框的 javascript 插件的一部分，因此标签可以具有不同的字体大小。

更新：我还包括它现在的样子：

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

【问题讨论】：

你测试的是哪个浏览器？它看起来对我来说是正确的（IE9）
如果标签可以是不同的大小，那么它必须动态移动，所以你可能只想在插件中设置它。
@James - 我添加了我的 Chrome 显示它的图像（我在 IE8 和 FF 上看到相同）

标签： html css alignment vertical-alignment

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

按照您的要求，试试一张桌子：http://jsfiddle.net/3rRb6/

（当然，除非你是那种 omg-im-not-using-a-table-for-layout!@$#?@$!?! 类型的人）

【讨论】：

问题不在于使用表；正如我所提到的，我需要在我正在编写的 js 插件的上下文中解决这个问题，以替换真正的复选框及其标签，并且原始标签可能不在原始复选框旁边，所以我不能使用任何将它们联系在一起。