单选按钮与文本对齐

Question

I am trying to get my gender button to align with my radio image buttons this is the codes have so far. It gives me the text above the button. Thank you in advance

 <div class="genderalign"> <p>Choose:</p> <input type="radio" name="option" value="1" id="choose-1" /> <label for="choose-1"> <img src="/images/femaleC.png" /> </label> <input type="radio" name="option" value="2" id="choose-2" /> <label for="choose-2"> <img src="/images/maleC.png" /> </label> </div>

Answer 1

I've corrected the misplaced </div> so your HTML is now like this.

Then just apply flexbox

 .genderalign { display: flex; align-items: center; }

 <div> <div class="genderalign"> <p>Choose:</p> <input type="radio" name="option" value="1" id="choose-1" /> <label for="choose-1"> <img src="/images/femaleC.png"/> </label> <input type="radio" name="option" value="2" id="choose-2" /> <label for="choose-2"> <img src="/images/maleC.png" /> </label> </div> </div>