html - 如何水平对齐单选按钮和图像

Question

我无法获得水平图像的单选按钮，例如 radio 图像、 radio 图像、 radio 图像等。有人可以帮我吗。 html代码是

<fieldset id="CreditCard">
    <legend>Credit Card (required)</legend>
<fieldset class="optionGroup">
 <label>
          <input type="radio" name="ccard"><img src="discover.png" alt="discover card">
</label>
 <label>
   <input type="radio" name="ccard"> <img src="diners.png" alt="diners card">
    </label>
 <label>
 <input type="radio" name="ccard"><img src="master.png" alt="master card">
     </label>
<label>
   <input type="radio" name="ccard"><img src="visa.png" alt="visa card">
      </label>
</fieldset>

css代码是

fieldset.optionGroup
    {
    float: none;
    margin-left: 25%;
           }
fieldset.optionGroup label
    {
    display: inline;
    float: none;
    width: 100px;
    }
fieldset.optionGroup input
    {
    float:none;
    margin: 0px;
    width: 20px;
    }

Fiddle

Answer 1

使用 position CSS 规则。

fieldset.optionGroup input {
    float: none;
    margin: 0;
    position: relative;
    top: -16px;
    width: 20px;
}

Demo