html 如何将单选按钮与图像水平对齐

gkl3eglg  于 2023-04-18  发布在  其他
关注(0)|答案(3)|浏览(112)

我不能得到这个单选按钮与图像水平例如无线电图像,无线电图像,无线电图像等可以有人帮助我了。html代码是

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

Fiddle

7uhlpewt

7uhlpewt1#

使用position css规则。

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

Demo

ig9co6j1

ig9co6j12#

给予这个

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

vof42yt13#

简单地添加这一行到你的css,它应该工作:

fieldset img{
    vertical-align:middle;
}

相关问题