将标签与背景图像对齐

Question

I have created a checkbox constructed of a div with checkbox image background and a label.

Html:

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

and css:

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

The problem is - the label is not aligned with the image, it sits slightly below the baseline of the image div and that looks ugly. You can see the jsfiddle of it here: http://jsfiddle.net/muzzzy/3hUGV/5/

How can I align them, given that I can't specify absolute values for padding or line-height, because this is really a part of a javascript plugin that converts regular checkboxes, so labels can be of different font sizes.

UPDATE: I'm also including the image of how it looks now:

I'd like the text to be vertically centered with the center of the image

Answer 1

If you dont care about older browsers, drop the float: left and try using display: inline-block; on the div.checkbox. After that, play with the vertical-align attribute.

Then do some cross-browser because for some of us it already looks ok!

Here the live example: http://jsfiddle.net/karameloso/hQ2uK/

Answer 2

You will be better off swapping out your div.checkbox for a span , and then setting the span to display:inline-block . This way, you can use vertical-align:middle on the elements to get them centered (The only rare cases vertical-align has a use!)

JS Fiddle: http://jsfiddle.net/3hUGV/34/

Answer 3

Well for what you're asking, try a table: http://jsfiddle.net/3rRb6/

(Unless of course, you're one of those omg-im-not-using-a-table-for-layout!@$#?@$!?! type of people)