align radio button inline with text

November 26, 2023

I tried the following with flex but it looks like the radio button is slightly lower than it should be. probably to accommodate letters like j q g but not a b c. Is there a way to adjust?

.panswers {
  display: flex;
  align-items: center;
}

<div class='panswers'>
  <label for='ans[1]'>A</label>
  <input type='radio' name='ans[1]' id=a ns[1]>
  <p>Why are local variable names beginning with an underscore discouraged?</p>
</div>

>Solution :

Radio buttons have a small margin on the top by default, which causes it to be misaligned in a flex container. Setting that margin to be zero fixes the issue

.panswers {
  display: flex;
  align-items: center;
}

input {
  margin-top: 0;
}

<div class='panswers'>
  <label for='ans[1]'>A</label>
  <input type='radio' name='ans[1]' id=a ns[1]>
  <p>Why are local variable names beginning with an underscore discouraged?</p>
</div>