texto - ¿Cómo alinear verticalmente un botón de radio html a su etiqueta?
centro vertical html (13)
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.
¿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;
}
Agregar display:inline-block en display:inline-block a las etiquetas y dándoles padding-top , arreglaría esto, creo. Además, solo establecer la line-height en las etiquetas también lo haría.
Algo como esto debería funcionar
CSS:
input {
float: left;
clear: left;
width: 50px;
line-height: 20px;
}
label {
float: left;
vertical-align: middle;
}
Aunque estoy de acuerdo con que las tablas no se deben usar para diseños de diseño contrarios a la creencia popular, pasan la validación. es decir, la etiqueta de la tabla no está en desuso. La mejor manera de alinear los botones de radio es usar el CSS vertical de alineación vertical con los márgenes ajustados en los elementos de entrada.
Me gusta poner las entradas dentro de las etiquetas (bonificación adicional: ahora no necesita el atributo for para la etiqueta), y poner vertical-align: middle en la 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>
(El -2px margin-top es una cuestión de gusto).
Otra opción que realmente me gusta es usar una mesa. (¡Sostenga sus diapasones! ¡Es realmente agradable!) Significa que necesita agregar el atributo for a todas sus etiquetas e id a sus entradas. Recomiendo esta opción para las etiquetas con contenido de texto largo, 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>
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 usé para obtener una verdadera alineación 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>
Prueba esto:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
Puedes hacer así:
input {
vertical-align:middle;
}
label{
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
}
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.
También podría agregar un poco de flexibilidad a las respuestas.
.Radio {
display: inline-flex;
align-items: center;
}
.Radio input {
margin-right: 5px;
}
.Radio--Large {
font-size: 2rem;
}
<div>
<label class="Radio" for="sex-female">
<input type="radio" id="sex-female" name="sex" value="female" />
Female
</label>
<label class="Radio" for="sex-male">
<input type="radio" id="sex-male" name="sex" value="male" />
Male
</label>
</div>
<div>
<label class="Radio Radio--Large" for="sex-female">
<input type="radio" id="sex-female" name="sex" value="female" />
Female
</label>
<label class="Radio Radio--Large" for="sex-male">
<input type="radio" id="sex-male" name="sex" value="male" />
Male
</label>
</div>
hay varias formas, una que preferiría es usar una tabla en html. puede agregar dos tablas coloum tres filas y colocar los botones de radio y lable.
<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>
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;
}
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.
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.