bonaca bonaca - 3 months ago 10
CSS Question

how to align radio buttons?



#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
.

Answer

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>

Comments