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 have the labels to the left of the form, with the radio buttons inline on the right of the labels.
• The radio buttons are a tad lower than the labels, and I am looking to center them evenly with the labels so it looks nicer and more professional.

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!

CSS code for radio buttons

What it looks like now

CodePudding user response：

You need to wrap the label and input field in a div and use flexbox property like:

.className {
   display: flex;
   align-items:center;
   gap:10px;
 }

CodePudding user response：

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>

CodePudding user response：

you have not used semicolon (;) after margin-top:0 css Code