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


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

The radio buttons.

¿Cómo puedo alinear verticalmente los botones de radio 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;
}

65
2017-11-22 09:50


origen


Respuestas:


Prueba esto:

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

111
2018-02-07 22:22



Sé que seleccioné el anwer por medio de menuka devinda, pero mirando los comentarios debajo, concurrí y traté de encontrar una mejor solución. Logré pensar en 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 ofrecieron una respuesta, su respuesta no pasó desapercibida. Si todavía tiene otras ideas, siéntase libre de agregar su propia respuesta a esta pregunta.


13
2017-11-22 13:52



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

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

Violín


9
2017-11-22 10:05



intente agregar vertical-align:top en 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/


8
2017-11-22 10:02



Puedes hacer así:

input {
    vertical-align:middle;
}

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

MANIFESTACIÓN


6
2017-11-22 10:06



Algo como esto debería funcionar

CSS:

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

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

1
2017-11-22 09:58



label, input {
    vertical-align: middle;
}

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


1
2018-06-03 13:27



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


1
2017-07-19 23:43