Bir html radyo düğmesini etiketine dikey olarak nasıl hizalayabilirim?

Etiketleri ile aynı satırda bulunan radyo düğmelerine sahip bir formum var. Ancak radyo düğmeleri, aşağıdaki ekran görüntüsünde gösterildiği gibi etiketleriyle dikey olarak hizalanmamıştır.

Radyo düğmelerini etiketleriyle dikey olarak nasıl hizalayabilirim?

Düzenle:

İşte html kodu:

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

Ve css kodu:

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

Bunu dene:

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

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

Tüm radyolara sınıf koyun. Bu html sayfasındaki tüm radyo düğmeleri için çalışacaktır.

Vaktini boşa harcamak

Menuka devinda'nın cevabını seçtiğimi biliyorum ama altındaki yorumlara baktığımda hemfikir oldum ve daha iyi bir çözüm bulmaya çalıştım. Bunu bulmayı başardım ve bence bu çok daha şık bir çözüm:

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

Cevap veren herkese teşekkürler, cevabınız gözden kaçmadı. Hala başka fikirleriniz varsa, bu soruya kendi cevabınızı eklemekten çekinmeyin.

eklemeyi deneyin vertical-align:topcss içine

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

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

Cevaplara biraz esneklik katabilir.

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

Bunu beğenebilirsin:

input {
    vertical-align:middle;
}

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

Girişleri etiketlerin içine koymayı seviyorum (ek bonus: artık foretiketin üzerindeki niteliğe ihtiyacınız yok) ve girişi ekleyin 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>

(Bu -2px margin-topbir zevk meselesidir.)

Gerçekten sevdiğim bir başka seçenek de masa kullanmak. (Atış çatallarınızı tutun! Gerçekten güzel!) Bu, fortüm etiketlerinize ve idgirişlerinize nitelik eklemeniz gerektiği anlamına gelir . Bu seçeneği, çok satırlı uzun metin içeriğine sahip etiketler için tavsiye ettim.

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

Bunun gibi bir şey çalışmalı

CSS:

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

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

label, input {
    vertical-align: middle;
}

Sadece kutuların dikey orta noktasını üst kutunun taban çizgisi artı ebeveynin x yüksekliğinin yarısı (en.wikipedia.org/wiki/X-height) ile hizalıyorum.

Bu yanıtların birçoğu vertical-align: middle;, hizalamayı yaklaştıran, ancak benim için hala birkaç pikselle kapalı olduğunu söylüyor. Etiketler ve radyo girişleri arasında gerçek 1'e 1 hizalama elde etmek için kullandığım yöntem şudur 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>

Tabloların tasarım düzenleri için kullanılmaması gerektiğine katılıyorum, ancak genel inanışın aksine, geçerliliğini geçerler. yani tablo etiketi kullanımdan kaldırılmamıştır. Radyo düğmelerini hizalamanın en iyi yolu, orta CSS'yi giriş öğelerinde ayarlanmış kenar boşluklarıyla dikey hizalama kullanmaktır.

display:inline-blockEtiketlere eklemek ve vermek padding-topbunu düzeltir sanırım. Ayrıca, sadece line-heightetiketleri ayarlamak da olur.

Birkaç yol var, tercih edeceğim bir tanesi html'de bir tablo kullanmaktır. iki sütun üç sıra tablo ekleyebilir ve radyo düğmelerini ve etiketi yerleştirebilirsiniz.

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