Jak wyrównać w pionie przycisk radiowy HTML do etykiety?

Mam formularz z przyciskami opcji, które znajdują się w tym samym wierszu, co ich etykiety. Przyciski opcji nie są jednak wyrównane w pionie z etykietami, jak pokazano na poniższym zrzucie ekranu.

Jak mogę wyrównać w pionie przyciski opcji z ich etykietami?

Edytować:

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

Oraz kod CSS:

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

Spróbuj tego:

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

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

Umieść klasę dla wszystkich radia. Będzie to działać dla wszystkich przycisków opcji na stronie html.

Skrzypce

Wiem, że wybrałem odpowiedź menuka devinda, ale patrząc na komentarze poniżej, zgodziłem się i próbowałem wymyślić lepsze rozwiązanie. Udało mi się to wymyślić i moim zdaniem jest to dużo bardziej eleganckie rozwiązanie:

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

Dzięki wszystkim, którzy udzielili odpowiedzi, Twoja odpowiedź nie pozostała niezauważona. Jeśli nadal masz inne pomysły, możesz dodać własną odpowiedź na to pytanie.

spróbuj dodać vertical-align:topdo css

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

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

Równie dobrze może nadać odpowiedziom trochę elastyczności.

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

Możesz zrobić tak:

input {
    vertical-align:middle;
}

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

Lubię umieszczać dane wejściowe wewnątrz etykiet (dodatkowy bonus: teraz foratrybut na etykiecie nie jest potrzebny ) i umieszczać vertical-align: middlena wejściu.

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>

(To -2px margin-topkwestia gustu.)

Inną opcją, którą naprawdę lubię, jest użycie stołu. (Trzymaj za widelce! To naprawdę fajne!) Oznacza to, że musisz dodać foratrybut do wszystkich swoich etykiet i iddo swoich danych wejściowych. Poleciłbym tę opcję dla etykiet z długą zawartością tekstową w wielu wierszach.

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

Coś takiego powinno działać

CSS:

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

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

label, input {
    vertical-align: middle;
}

Po prostu dopasowuję pionowy punkt środkowy pól do linii bazowej pola nadrzędnego plus połowę wysokości x (en.wikipedia.org/wiki/X-height) elementu nadrzędnego.

Wiele z tych odpowiedzi sugeruje użycie vertical-align: middle; , co powoduje, że wyrównanie jest bliskie, ale dla mnie nadal jest wyłączone o kilka pikseli. Metoda, której użyłem, aby uzyskać prawdziwe wyrównanie 1 do 1 między etykietami i wejściami radiowymi, jest następująca 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>

Chociaż zgadzam się, tabele nie powinny być używane do projektowania układów, wbrew powszechnemu przekonaniu, że przeszły weryfikację. tzn. znacznik tabeli nie jest przestarzały. Najlepszym sposobem wyrównywania przycisków opcji jest użycie wyrównania w pionie środkowego CSS z marginesami dostosowanymi na elementach wejściowych.

Myślę, że dodanie display:inline-blockdo etykiet i nadanie im padding-toptego rozwiązałoby. Również samo ustawienie line-heightna etykietach również.

jest kilka sposobów, jeden, który wolałbym, to użycie tabeli w html. można dodać tabelę z dwoma kolorami i trzema wierszami oraz umieścić przyciski opcji i etykietę.

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