将标签与背景图片对齐

我创建了一个带有复选框图像背景和标签的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插件的一部分，它将常规复选框，所以标签可以具有不同的字体大小。

更新：我还包括它的现在看起来像我：

enter image description here

我想文字与图像

来源

2011-08-04 Andrey

哪个浏览器是你的测试？它看起来是正确的（IE9） –

如果标签可以是不同的大小，那么它将不得不动态移动，所以你可能只想在插件中设置它。 –

@James - 我添加了我的Chrome如何显示它的图像（我在IE8和FF上看到相同） – Andrey

你会好起来的换掉div.checkbox的span，然后设置span到display:inline-block。这样，您就可以使用上的元素vertical-align:middle，让他们为中心的（唯一的极少数情况下垂直对齐具有使用！）

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

来源

2011-08-04 17:28:19 Mig

如果您的中心垂直居中不关心旧版浏览器，放弃float: left并尝试在div.checkbox上使用display: inline-block;。之后，玩垂直对齐属性。

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

这里的活生生的例子：http://jsfiddle.net/karameloso/hQ2uK/

来源

2011-08-04 17:06:02 karameloso

那么你会问，试了桌子上：http://jsfiddle.net/3rRb6/

（当然，除非你是那些OMG-IM-未使用的一个-a表换布局！@ $＃？@ $！？！类型的人）

来源

2011-08-04 17:17:16 kei

问题不在于使用表格;正如我所说，我需要解决这个问题，我正在写一个js插件的上下文来替代真正的复选框和它们的标签，原始标签可能不会在原来的复选框旁边，所以我不能使用任何把它们连在一起。 – Andrey

将标签与背景图片对齐

回答

相关问题