Radio/Checkbox Custom Background and Vertical-align

I have a trouble with my radio buttons/checkboxes with custom backgrounds. I styled them like here : Quick Tip: Easy CSS3 Checkboxes and Radio Buttons. The main part is that input is behild label tag, other solutions of my topic suggest input to be inside label.

<li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked">
  <label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  </label>
</li>

It is standart Woocommerce checkout shipping method choice. Here is how it looks : JSFiddle

It looks great on widescreen devices, but on mobiles label is settled on 2 lines, so I need to place checkbox image on center of <li>. I tried to apply vertical-align, but it don't center on whole <li> element. Maybe someone has encountered this problem?

Is should be like that