Bagaimana cara menyelaraskan secara vertikal tombol radio html ke labelnya?

Saya memiliki formulir dengan tombol radio yang berada di baris yang sama dengan labelnya. Namun tombol radio tidak disejajarkan secara vertikal dengan labelnya seperti yang ditunjukkan pada gambar di bawah.

Bagaimana cara menyelaraskan tombol radio secara vertikal dengan labelnya?

Edit:

Berikut kode html-nya:

<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/>

Dan kode cssnya:

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

Coba ini:

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

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

Tempatkan kelas untuk semua radio. Ini akan bekerja untuk semua tombol radio di halaman html.

Biola

Saya tahu saya telah memilih jawaban oleh menuka devinda tetapi melihat komentar di bawahnya saya setuju dan mencoba untuk menemukan solusi yang lebih baik. Saya berhasil menemukan ini dan menurut saya ini adalah solusi yang jauh lebih elegan:

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

Terima kasih kepada semua orang yang menawarkan jawaban, jawaban Anda tidak luput dari perhatian. Jika Anda masih memiliki ide lain, silakan tambahkan jawaban Anda sendiri untuk pertanyaan ini.

coba tambahkan vertical-align:topke dalam css

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

Tes: http://jsfiddle.net/muthkum/heAWP/

Sebaiknya tambahkan sedikit kelenturan pada jawaban.

.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>

Anda bisa melakukan seperti ini:

input {
    vertical-align:middle;
}

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

Saya suka meletakkan input di dalam label (bonus tambahan: sekarang Anda tidak memerlukan foratribut pada label), dan memasukkan vertical-align: middleinput.

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>

(Ini -2px margin-topmasalah selera.)

Opsi lain yang sangat saya sukai adalah menggunakan tabel. (Tahan garpu pitch Anda! Benar-benar bagus!) Itu berarti Anda perlu menambahkan foratribut ke semua label dan ids ke masukan Anda. Saya merekomendasikan opsi ini untuk label dengan konten teks panjang, lebih dari beberapa baris.

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

Sesuatu seperti ini seharusnya berhasil

CSS:

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

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

label, input {
    vertical-align: middle;
}

Saya hanya menyelaraskan titik tengah vertikal kotak dengan garis dasar kotak induk ditambah setengah x-height (en.wikipedia.org/wiki/X-height) induk.

Banyak dari jawaban ini mengatakan untuk digunakan vertical-align: middle;, yang membuat kesejajarannya dekat tetapi bagi saya itu masih meleset beberapa piksel. Metode yang saya gunakan untuk mendapatkan kesejajaran 1 ke 1 yang benar antara label dan input radio adalah ini, dengan 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>

Meskipun saya setuju tabel tidak boleh digunakan untuk tata letak desain yang bertentangan dengan kepercayaan populer, tabel tersebut lolos validasi. yaitu tag tabel tidak digunakan lagi. Cara terbaik untuk menyelaraskan radio button adalah menggunakan CSS tengah perataan vertikal dengan margin yang disesuaikan pada elemen masukan.

Menambahkan display:inline-blockke label dan memberi mereka padding-topakan memperbaiki ini, saya pikir. Juga, hanya mengatur line-heightpada label juga akan.

Ada beberapa cara, yang saya lebih suka adalah menggunakan tabel di html. Anda dapat menambahkan dua kolom tabel tiga baris dan menempatkan tombol radio dan label.

<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>