单选按钮与文本对齐

Question

我试图让我的性别按钮与我的单选图像按钮对齐，这是迄今为止的代码。 它给了我按钮上方的文本。 先感谢您

 <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

我已经更正了错位的</div>因此您的 HTML 现在是这样的。

然后只需应用 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>