Come allineare verticalmente un pulsante di opzione HTML alla sua etichetta?

Ho un modulo con pulsanti di opzione che si trovano sulla stessa riga delle loro etichette. I pulsanti di opzione, tuttavia, non sono allineati verticalmente con le rispettive etichette, come mostrato nella schermata seguente.

Come posso allineare verticalmente i pulsanti di opzione con le loro etichette?

Modificare:

Ecco il codice 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/>

E il codice css:

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

Prova questo:

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

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

Metti lezione per tutte le radio. Questo funzionerà per tutti i pulsanti di opzione nella pagina html.

Violino

So di aver selezionato la risposta di menuka devinda ma guardando i commenti sotto ho concordato e ho cercato di trovare una soluzione migliore. Sono riuscito a trovare questo e secondo me è una soluzione molto più elegante:

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

Grazie a tutti coloro che hanno offerto una risposta, la tua risposta non è passata inosservata. Se hai ancora altre idee, sentiti libero di aggiungere la tua risposta a questa domanda.

prova ad aggiungere vertical-align:topnel 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/

Tanto vale aggiungere un po 'di flessibilità alle risposte.

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

Puoi fare così:

input {
    vertical-align:middle;
}

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

DEMO

Qualcosa di simile dovrebbe funzionare

CSS:

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

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

label, input {
    vertical-align: middle;
}

Sto solo allineando il punto medio verticale delle caselle con la linea di base della casella genitore più metà dell'altezza x (en.wikipedia.org/wiki/X-height) del genitore.

Molte di queste risposte dicono di usare vertical-align: middle;, che ottiene l'allineamento vicino ma per me è ancora spento di alcuni pixel. Il metodo che ho usato per ottenere un allineamento 1 a 1 vero tra le etichette e gli ingressi radio è questo, con 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>

Mi piace inserire gli input all'interno delle etichette (vantaggio aggiuntivo: ora non è necessario l' forattributo sull'etichetta) e inserire vertical-align: middlel'input.

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È una questione di gusti.)

Un'altra opzione che mi piace molto è usare un tavolo. (Tieni le tue forchette di presentazione! È davvero bello!) Significa che devi aggiungere l' forattributo a tutte le tue etichette ides ai tuoi input. Ho consigliato questa opzione per le etichette con contenuto di testo lungo, su più righe.

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

Anche se sono d'accordo che le tabelle non dovrebbero essere utilizzate per layout di progettazione contrariamente alla credenza popolare, superano la convalida. cioè il tag table non è deprecato. Il modo migliore per allineare i pulsanti di opzione è utilizzare il CSS centrale di allineamento verticale con i margini regolati sugli elementi di input.

Aggiungere display:inline-blockalle etichette e assegnarle padding-toprisolverebbe il problema, credo. Inoltre, anche solo impostando il line-heightsulle etichette.

ci sono diversi modi, uno che preferirei è usare una tabella in html. puoi aggiungere due colori e tre righe di tabella e posizionare i pulsanti di opzione e l'etichetta.

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