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

Question

我无法获得水平图像的这个单选按钮，例如无线电图像，无线电图像，无线电图像等。 有人可以帮我吗。 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

Answer 2

给这个：

fieldset.optionGroup,
fieldset.optionGroup label,
fieldset.optionGroup input
{
    display: inline;
    vertical-align: middle;
}

Answer 3

只需将这一行添加到您的CSS中即可：

fieldset img{
    vertical-align:middle;
}