Search code examples
htmlcsscheckboxradio-buttoninline

Why I cant seem to center and get my radio buttons inline with the labels?


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


Solution

  • 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>