收音机/复选框自定义背景和垂直对齐

Question

我的单选按钮/复选框与自定义背景有问题。我在这里称呼他们：Quick Tip: Easy CSS3 Checkboxes and Radio Buttons。主要部分是输入是behild标签标签，我的主题的其他解决方案建议输入在标签内。

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

这是标准的Woocommerce结帐运输方式选择。以下是它的外观：JSFiddle

在宽屏设备上看起来很棒，但在手机上标签上有2行，所以我需要在<li>的中心放置复选框图像。我尝试应用vertical-align，但它并不以整个<li>元素为中心。也许有人遇到过这个问题？

应该是那样的

ul#shipping_method {
    width: 50%;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#shipping_method li {
    border-bottom: 1px solid #d3ced2;
    line-height: 2;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

ul#shipping_method li input {
  display: none;
}

ul#shipping_method li span {
    font-weight: normal;
    text-transform: none;
    font-size: 13px;
}

ul#shipping_method li input + label:before {
    border-radius: 100%;
    margin-top: -2px;
}

ul#shipping_method li input + label:before {
    background-color: #fff;
    border: 1px solid #000;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: '';
    margin-right: 8px;
    cursor: pointer;
    vertical-align: middle;
}

ul#shipping_method li input:checked + label:before {
    background: url(http://s32.postimg.org/9rfrl1wlh/radio_checked.png) -1px;
}

<form>
<ul id="shipping_method">
  <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>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method">
    <label for="shipping_method_0_flat_rate">DHL Express - <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </label>									
    </li>
  </ul>
</form>

Answer 1

尝试在表格中包含单选按钮和标签作为列元素

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，您可能需要编辑单选按钮的css。