¿Cómo alinear verticalmente un botón de radio html a su etiqueta?

Tengo un formulario con botones de opción que están en la misma línea que sus etiquetas. Sin embargo, los botones de opción no están alineados verticalmente con sus etiquetas como se muestra en la captura de pantalla a continuación.

¿Cómo puedo alinear verticalmente los botones de opción con sus etiquetas?

Editar:

Aquí está el código 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/>

Y el código css:

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

Prueba esto:

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

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

Ponle clase a toda la radio. Esto funcionará para todos los botones de opción en la página html.

Violín

Sé que había seleccionado la respuesta de menuka devinda, pero mirando los comentarios a continuación, estuve de acuerdo e intenté encontrar una solución mejor. Me las arreglé para llegar a esto y, en mi opinión, es una solución mucho más elegante:

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

Gracias a todos los que dieron una respuesta, su respuesta no pasó desapercibida. Si aún tiene otras ideas, no dude en agregar su propia respuesta a esta pregunta.

intente agregar vertical-align:topen el css

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

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

También podría agregar un poco de flexibilidad a las respuestas.

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

Puedes hacer así:

input {
    vertical-align:middle;
}

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

MANIFESTACIÓN

Algo como esto debería funcionar

CSS:

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

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

label, input {
    vertical-align: middle;
}

Solo alineo el punto medio vertical de los cuadros con la línea de base del cuadro principal más la mitad de la altura x (en.wikipedia.org/wiki/X-height) del principal.

Muchas de estas respuestas dicen usar vertical-align: middle;, lo que hace que la alineación se acerque, pero para mí todavía está desviada por unos pocos píxeles. El método que utilicé para obtener una verdadera alineación 1 a 1 entre las etiquetas y las entradas de radio es este, 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>

Me gusta poner las entradas dentro de las etiquetas (bonificación adicional: ahora no necesita el foratributo en la etiqueta) y poner vertical-align: middlela entrada.

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-topEs cuestión de gustos).

Otra opción que me gusta mucho es usar una mesa. (¡Mantenga sus horquillas de tono! ¡Es realmente agradable!) Significa que debe agregar el foratributo a todas sus etiquetas y ida sus entradas. Recomendaría esta opción para etiquetas con contenido de texto extenso, en varias líneas.

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

Si bien estoy de acuerdo en que las tablas no deben usarse para diseños de diseño, contrariamente a la creencia popular, pasan la validación. es decir, la etiqueta de la tabla no está obsoleta. La mejor manera de alinear los botones de radio es usar el CSS central de alineación vertical con márgenes ajustados en los elementos de entrada.

Agregar display:inline-blocketiquetas y dárselas padding-toparreglaría esto, creo. Además, solo establecer line-heighten las etiquetas también lo haría.

Hay varias formas, una que preferiría es usar una tabla en html. Puede agregar dos tablas de tres filas de colores y colocar los botones de opción y la etiqueta.

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