CODEWITHSUNDEEP
htmlcss
user2199351
user2199351

Reputation: 103

how to align radio button with image horizontally

i can't get this radio button with image horizontally e.g radio-image,radio-image,radio-image etc. can someone help me out. The html code is

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

Upvotes: 2

Views: 7207

Answers (3)

Dinesh Gajbhiye
Dinesh Gajbhiye

Reputation: 684

Simply add this one line to your css and it should work:

fieldset img{
    vertical-align:middle;
}

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Use position css rule.

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

Demo

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Give this:

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

Upvotes: 0

Related Questions