Search code examples
cssflexbox

align radio button inline with text

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>