No matter what I look up online, anything I try doesn't seem to center these annoying radio buttons with the labels inline horizontally.
I am very finicky with the smallest details, so getting this right is a huge thing for me!
Hoping someone can point out what I am missing or doing wrong.
P.S. I am brand new to this!
It would be helpful if you could also put in your html. I don't seem to be having the same problems. The radio buttons align with the baseline of the text as can be seen below. If you need to nudge them up a bit you can use the transform css rule as per the example below
Also see here
.nudge {
transform: translateY(-0.1rem);
}
<p>Would you recommend this survey to others?</p>
<p><label for='radio1'>Yes?<input id='radio1' type='radio' name='radios'></label></p>
<p><label for='radio2'>No?<input id='radio2' type='radio' name='radios'></label></p>
<p>What is your go-to weapon for hunting deer?</p>
<p><label for='checkbox1'><input type='checkbox' id='checkbox1'>Rifle</label></p>
<p><label for='checkbox2'><input type='checkbox' id='checkbox2'>Shotgun</label></p>
<hr>
<p>NUDGED Would you recommend this survey to others?</p>
<p><label for='radio3'>Yes?<input class='nudge' id='radio3' type='radio' name='radiosx'></label></p>
<p><label for='radio4'>No?<input class='nudge' id='radio4' type='radio' name='radiosx'></label></p>
<p>What is your go-to weapon for hunting deer?</p>
<p><label for='checkbox3'><input class='nudge' type='checkbox' id='checkbox3'>Rifle</label></p>
<p><label for='checkbox4'><input class='nudge' type='checkbox' id='checkbox4'>Shotgun</label></p>