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

给这个：

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

Answer 3

只需将这一行添加到您的 css 中，它应该可以工作：

fieldset img{
    vertical-align:middle;
}