html - ラジオボタンと画像を水平方向に揃える方法

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

フィドル

Answer 1

positioncss ルールを使用します。

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

Demo

Answer 2

次の 1 行を CSS に追加するだけで機能します。

fieldset img{
    vertical-align:middle;
}

Answer 3

これを与える：

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