วิธีจัดแนวปุ่มตัวเลือก html ให้ตรงกับป้ายกำกับ

ฉันมีแบบฟอร์มที่มีปุ่มตัวเลือกที่อยู่ในบรรทัดเดียวกับป้ายกำกับ อย่างไรก็ตามปุ่มตัวเลือกไม่ได้อยู่ในแนวตั้งกับป้ายกำกับดังที่แสดงในภาพหน้าจอด้านล่าง

ฉันจะจัดปุ่มตัวเลือกให้ตรงกับป้ายกำกับในแนวตั้งได้อย่างไร

แก้ไข:

นี่คือรหัส html:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

และรหัส css:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

ลองสิ่งนี้:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

input {
    display: table-cell;
    vertical-align: middle
}

ใส่คลาสสำหรับวิทยุทั้งหมด สิ่งนี้จะใช้ได้กับปุ่มตัวเลือกทั้งหมดในหน้า html

ซอ

ฉันรู้ว่าฉันเลือกเรือสำราญโดย menuka devinda แต่เมื่อดูความคิดเห็นด้านล่างฉันเห็นด้วยและพยายามหาทางออกที่ดีกว่า ฉันสามารถหาสิ่งนี้ได้และในความคิดของฉันมันเป็นโซลูชันที่หรูหรากว่ามาก:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

ขอบคุณทุกคนที่ให้คำตอบคำตอบของคุณไม่เป็นที่สังเกต หากคุณยังมีแนวคิดอื่น ๆ โปรดเพิ่มคำตอบของคุณเองสำหรับคำถามนี้

ลองเพิ่มvertical-align:topลงใน css

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

ทดสอบ: http://jsfiddle.net/muthkum/heAWP/

เช่นกันอาจเพิ่มความยืดหยุ่นให้กับคำตอบ

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin: 0 0.5rem 0;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

คุณสามารถทำได้ดังนี้:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

ฉันชอบใส่อินพุตไว้ในป้ายกำกับ (โบนัสเพิ่มเติม: ตอนนี้คุณไม่จำเป็นต้องมีforแอตทริบิวต์บนป้ายกำกับ) และใส่vertical-align: middleอินพุต

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

( -2px margin-topเป็นเรื่องของรสนิยม)

อีกทางเลือกหนึ่งที่ฉันชอบมากคือการใช้โต๊ะ (ถือส้อมขว้างของคุณมันเยี่ยมจริงๆ!) หมายความว่าคุณต้องเพิ่มforแอตทริบิวต์ให้กับป้ายกำกับทั้งหมดของคุณidลงในอินพุตของคุณ ขอแนะนำตัวเลือกนี้สำหรับป้ายกำกับที่มีเนื้อหาข้อความยาวหลายบรรทัด

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

สิ่งนี้ควรใช้งานได้

CSS:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

label, input {
    vertical-align: middle;
}

ฉันแค่จัดจุดกึ่งกลางแนวตั้งของกล่องให้ตรงกับเส้นฐานของกล่องหลักบวกครึ่งหนึ่งของความสูง x (en.wikipedia.org/wiki/X-height) ของพาเรนต์

คำตอบเหล่านี้จำนวนมากบอกว่าให้ใช้vertical-align: middle;ซึ่งทำให้การจัดตำแหน่งใกล้เคียงกัน แต่สำหรับฉันมันยังคงปิดอยู่ไม่กี่พิกเซล วิธีที่ฉันใช้ในการจัดตำแหน่ง 1 ถึง 1 ที่แท้จริงระหว่างป้ายกำกับและอินพุตวิทยุคือvertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

แม้ว่าฉันยอมรับว่าตารางไม่ควรใช้สำหรับเค้าโครงการออกแบบที่ตรงกันข้ามกับความเชื่อที่นิยม แต่ก็ผ่านการตรวจสอบความถูกต้อง กล่าวคือไม่เลิกใช้แท็กตาราง วิธีที่ดีที่สุดในการจัดแนวปุ่มตัวเลือกคือการใช้ CSS ตรงกลางในแนวตั้งพร้อมระยะขอบที่ปรับบนองค์ประกอบอินพุต

ฉันคิดว่าการเพิ่มdisplay:inline-blockป้ายกำกับและให้มันpadding-topจะช่วยแก้ปัญหานี้ได้ นอกจากนี้การตั้งค่าline-heightบนป้ายกำกับก็ทำได้เช่นกัน

มีหลายวิธีวิธีหนึ่งที่ฉันต้องการคือการใช้ตารางใน html คุณสามารถเพิ่มตารางสามแถวสอง coloum และวางปุ่มตัวเลือกและฉลาก

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>