Vertical-alignment label and checkboxes when label is split into two lines

Question

There are checkboxes, everything looks good, but when the label text wraps into two lines, I can't force my checkbox to middle align with the label. It stays on top. jsFiddle.

How it looks like now:

What is expected:

HTML:

<input type="checkbox" id="c1" name="1" />
<label value="1" for="c1"><span></span>Lorem ipsum lorem ipsum</label>
<input type="checkbox" id="c2" name="2" />
<label value="2" for="c2"><span></span>Lorem ipsum lorem ipsum lorem ipsum 2</label>

CSS:

  body
{
    min-height:100%;
    width:100%;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    font-size:1em;
    display:table;
}   
input[type="checkbox"] {
       display:none;
   }
   input[type="checkbox"] + label span {
       display:inline-block;
       width:19px;
       height:19px;
       margin:-1px 8px 0 0;
       vertical-align:middle;
       background:url(http://oi59.tinypic.com/i5ngoj.jpg) left top no-repeat;
       float:left;
       cursor:pointer;
   }
   input[type="checkbox"]:checked + label span {
       background:url(http://oi59.tinypic.com/i5ngoj.jpg) -19px top no-repeat;
   }
   input[type="checkbox"]:checked + label {
       border: 1px #99cc00 solid;
       font-weight: 500;
   }
   label, .toggle {
       font-weight:300;
       margin-bottom:10px;
       padding:12px;
       display:block;
       max-width:100%;
       background-color:#fff;
       color:#4c4c4c;
       -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
       border-radius: 3px;
       -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
       -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
       box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
   }

Answer 1

Update - Better Answer

Display the background image on the label. I split the unchecked and checked images into separate files.

Have a fiddle!

HTML

<input type="checkbox" id="c1" />
<label for="c1">This is my label</label>

CSS

input[type=checkbox] {
    display: none
}
label {
    display: block;
    width: 100px;
    background: url(http://i.imgur.com/KwNXcwW.gif) left center no-repeat;
    padding: 0 0 0 28px;
    margin: 20px 0 0;
    cursor: pointer;
}
input:checked + label {
    background: url(http://i.imgur.com/4Zp4dZ0.gif) left center no-repeat;
}

---

Old answer

Without replacing checkboxes - display: table and display: table-cell; will work nicely.

In this example I have not replaced the checkboxes with images to keep it simple.

Have a fiddle!

HTML

<div>
    <input type="checkbox" id="c1" name="1" />
    <label value="1" for="c1">Lorem ipsum</label>
</div>

CSS

div {
    display: table;
    margin: 10px 0;
}
div input {
    display: table-cell;
    vertical-align: middle;
     width: 40px;
    height: 100%;
}
div label {
    display: table-cell;
    vertical-align: middle;
     width: 180px;
        padding: 3px 0 0;
}