垂直對齊單選按鈕

Question

基本上我試圖讓我的所有按鈕像第一個問題一樣垂直對齊。 我不明白為什么我不能讓第二個問題正確對齊。 我嘗試了不同的方法，例如使用 vertical-align: middle 屬性，但我什么也做不了

 body { margin: 0px; background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); } #wrapper { padding-top: 0px; text-align: center; margin-top: -1%; margin-left: 20%; margin-right: 20%; background-color: white; clear: both; } #quiz { padding-bottom: 10px; } #quiz li { list-style-type: none; }.question { padding-bottom: 10px; vertical-align: middle; }

 <div id="wrapper"> <div id="quiz"> <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false"> <li> <div class="question">1. How many continents are there?</div> </li> <input id="answer" type="radio" name="group1" value="wrong"> 6<br> <input id="answer" type="radio" name="group1" value="wrong"> 8<br> <input id="answer" type="radio" name="group1" value="correct"> 7<br> <input id="answer" type="radio" name="group1" value="wrong"> 5 <hr> <li> <div class="question">2. Where is France located?</div> </li> <input id="answer" type="radio" name="group2" value="correct">Europe<br> <input id="answer" type="radio" name="group2" value="wrong">Asia<br> <input id="answer" type="radio" name="group2" value="wrong">Antarctica<br> <input id="answer" type="radio" name="group2" value="wrong">North America <hr> </form> </div> </div>

Answer 1

您的代碼是正確的，它們已經是中間對齊的，但是根據文本，您的 css 以正確的方式不可見，因此也使用 lebels 作為文本並對齊標簽

Answer 2

使用text-align: left; 帶display: inline-block; 解決了你的問題

 body { margin: 0px; background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); } #wrapper { padding-top: 0px; text-align: center; margin-top: -1%; margin-left: 20%; margin-right: 20%; background-color: white; clear: both; } #quiz { padding-bottom: 10px; } #quiz li { list-style-type: none; }.question { padding-bottom: 10px; vertical-align: middle; }.wrap { text-align: left; display: inline-block; }

 <div id="wrapper"> <div id="quiz"> <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false"> <li> <div class="question">1. How many continents are there?</div> </li> <input id="answer" type="radio" name="group1" value="wrong"> 6<br> <input id="answer" type="radio" name="group1" value="wrong"> 8<br> <input id="answer" type="radio" name="group1" value="correct"> 7<br> <input id="answer" type="radio" name="group1" value="wrong"> 5 <hr> <li> <div class="question">2. Where is France located?</div> </li> <div class="wrap"> <input id="answer" type="radio" name="group2" value="correct">Europe<br> <input id="answer" type="radio" name="group2" value="wrong">Asia<br> <input id="answer" type="radio" name="group2" value="wrong">Antarctica<br> <input id="answer" type="radio" name="group2" value="wrong">North America </div> <hr> </form> </div> </div>