title: Vertical-alignment label and checkboxes when label is split into two lines
body: <p>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. <a href="http://jsfiddle.net/F2BUk/7/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  
  <p>How it looks like now:</p>
  
  <p><img src="https://i.stack.imgur.com/Ksxs0.png" alt="enter image description here"></p>
  
  <p>What is expected:</p>
  
  <p><img src="https://i.stack.imgur.com/WLEzB.jpg" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="checkbox" id="c1" name="1" /&gt;
  &lt;label value="1" for="c1"&gt;&lt;span&gt;&lt;/span&gt;Lorem ipsum lorem ipsum&lt;/label&gt;
  &lt;input type="checkbox" id="c2" name="2" /&gt;
  &lt;label value="2" for="c2"&gt;&lt;span&gt;&lt;/span&gt;Lorem ipsum lorem ipsum lorem ipsum 2&lt;/label&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  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);
     }
  </code></pre>