Survey Form - Button Aligning

[nhungvu0407]

Hello everyone. I’m currently working on building a survey form challenge. My code passed but I’ve encountered a problem with aligning the radio and checkbox button with the text in CSS. I’ve used “vertical-align: middle;” like the instruction but somehow they did not turn out to be aligned. I’m not sure what is the problem here. Please help me figure it out. Thank you so much.

Here is my code:
https://codepen.io/nhung-vu-the-animator/pen/XWEZOwE

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

freeCodeCamp.org

[bappyasif]

hello and welcome to fcc forum

after an initial skim at it, it seems to me ‘label’ could do some ‘styling’, i tried ‘flex’ it shows up like this, not sure if that’s your liking or not!! feel free to explore at this notion or some other means!! happy learning

[nhungvu0407]

Hi bappyasif. Thank you so much for your reply. I have tried your solution and it did fix my issue. However, I still have a question regarding your code. What is the meaning behind typing “label” twice? I’ve tried typing it once and it turned out messy.

[bappyasif]

yeah, it would!! in your html code you have an “outer” label which enclosed every other “label and input” in it

<label>Would you recommend freeCodeCamp to a friend?
        <label><input type="radio" name="recommend" value="definitely" class="inline" /> Definitely</label>
        <label><input type="radio" name="recommend" value="maybe" class="inline" /> Maybe</label>
        <label><input type="radio" name="recommend" value="not sure" class="inline" /> Not Sure<label>
</label>

and thats why by “label label” means target all those “label” nested within outer “label” from html

hope this makes sense, otherwise please feel free to reach out, happy learning

[nhungvu0407]

Thank you so much. Now I understand.