Search code examples
htmlcssalignmentvertical-alignment

Aligning label with a background image

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:

enter image description here

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

Solution

  • 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/