how to align radio buttons?

Question

#radio1,
#radio2 {
  vertical-align: middle;
}

<input type="radio" name="konk" id='radio1' value="abc">Dady
<input type="radio" name="konk" id='radio2' value="abc">Oliva

I tried on jsfiddle and using vertical-align:top - buttons are is perfectly middle aligned with text.

In my files (localhost and remote) code is the same, but it's impossible to get middle alignement , using any of the css options top - middle - bottom.

Maybe this is helpful http://stackoverflow.com/questions/396439/radio-checkbox-alignment-in-html-css — Luigi Cerone, Sep 02 '16 at 16:38
No way to answer this. The sizing of the radio buttons depends entirely on how a particular browser renders them. — Marc B, Sep 02 '16 at 16:38

score 3 · Accepted Answer · answered Sep 02 '16 at 16:51

You can wrap inputs in one parent element and then use display: flex and align-items: center on parent, also remove margin from inputs.

.wrap {
  display: flex;
  align-items: center;
}
input {
  margin: 0;
}

<div class="wrap">
  <input type="radio" name="konk" id='radio1' value="abc">Dady
  <input type="radio" name="konk" id='radio2' value="abc">Oliva
</div>

how to align radio buttons?

1 Answers1