Alineación de radio / casilla de verificación en HTML / CSS

79

¿Cuál es la forma más limpia de alinear correctamente los botones de radio / casillas de verificación con el texto? La única solución confiable que he estado usando hasta ahora está basada en tablas:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Algunos pueden desaprobar esto. Acabo de pasar un tiempo (nuevamente) investigando una solución sin tablas, pero fallé. He probado varias combinaciones de flotadores, posicionamiento absoluto / relativo y enfoques similares. No solo se basaron principalmente en silencio en una altura estimada de los botones de opción / casillas de verificación, sino que también se comportaron de manera diferente en diferentes navegadores. Idealmente, me gustaría encontrar una solución que no asuma nada sobre tamaños o peculiaridades especiales del navegador. Estoy bien con el uso de tablas, pero me pregunto dónde hay otra solución.

html  css  checkbox  radio-button 
— Jan Zich
fuente
Debe editar su pregunta para dejar en claro que se refiere a "en HTML". Iba a responder a tu pregunta sobre Java ...
— Richard T
3
Espero que @Richard T signifique JavaScript
— QueueHammer
1
Configuré un JSFIddle para ilustrar algunas de las sugerencias: jsfiddle.net/casebash/XNJxT/906
— Casebash
"alinear correctamente, ¿a qué te refieres? ¿Qué se considera alineado correctamente?
— Raedwald
puede alinear en porcentaje: yo uso: vertical-align: -15%; en la etiqueta de entrada
— PhilMaGeo

Respuestas:

121

Creo que finalmente he resuelto el problema. Una solución comúnmente recomendada es usar vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

El problema, sin embargo, es que esto todavía produce desalineaciones visibles aunque en teoría debería funcionar. La especificación CSS2 dice que:

vertical-align: middle: alinea el punto medio vertical del cuadro con la línea de base del cuadro principal más la mitad de la altura x del cuadro principal.

Entonces debería estar en el centro perfecto (la altura x es la altura del carácter x). Sin embargo, el problema parece deberse al hecho de que los navegadores comúnmente agregan algunos márgenes irregulares aleatorios a los botones de opción y las casillas de verificación. Se puede comprobar, por ejemplo en Firefox usando Firebug, que el margen de casilla de verificación predeterminado en Firefox es 3px 3px 0px 5px. No estoy seguro de dónde viene, pero los otros navegadores también parecen tener márgenes similares. Entonces, para obtener una alineación perfecta, es necesario deshacerse de estos márgenes:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Aún es interesante notar que en la solución basada en tablas, los márgenes se comen de alguna manera y todo se alinea bien.

— Jan Zich
fuente
4
Muy buena respuesta, bien investigada y funciona. Cuanto más miro CSS, la configuración de margen y relleno más localizada parece ser la clave. ¡Gracias!
— penderi
A partir del 18 de abril de 2010, esta solución no funciona en Firefox 3.6.3 para win
— Chris
5
un buen CSS para esto, para que no tenga que diseñar cada botón y cuadro - input [type = "radio"], input [type = "checkbox"] {vertical-align: middle; margen: 0px; }
— perilandmishap
4
FYI, el px después de 0 es redundante. Cuando el valor de CSS es 0, la unidad no importa, por margin:0lo que sería suficiente.
— jedmao
2
Recuerde verificar el vertical-alignde otros elementos en la misma línea (por ejemplo:) <label>cuando use esta solución.
— Diogo Kollross
31

Lo siguiente funciona en Firefox y Opera (lo siento, no tengo acceso a otros navegadores en este momento):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

El CSS:

.form-field * {
    vertical-align: middle;
}
— sids
fuente
No entiendo por qué no se aceptó su respuesta, es la más sencilla que funciona para todos los principales navegadores (a partir del 18 de abril de 2010)
— Chris
7
Tenga en cuenta que el DOCTYPE de su documento debe ser ESTRICTO para ver los efectos de VERTICAL-ALIGN.
4
Creo que la razón por la que esto no se aceptó como respuesta es porque, como dice la respuesta que se seleccionó, algunos navegadores agregan valores de margen asimétricos, lo que impide que este enfoque funcione.
— DaveyDaveDave
13

Encontré que la mejor y más fácil forma de hacerlo es esta porque no es necesario agregar etiquetas, divs ni nada.

input { vertical-align: middle; margin-top: -1px;}

— Darío
fuente
Es el margen superior: -1px; esa es la salsa extra que obtiene mi voto. Tengo una radio dentro de un espacio que estoy usando como botón. poner solo la alineación vertical para el estilo de radio hace que la radio cruce la parte inferior del tramo. poner la alineación vertical en el estilo de tramo deja el botón en la parte superior. Solo el margen superior parece no tener ningún efecto. Pero ponerlos juntos y voila
— Gordon
-1. Esta es una mala idea, está causando que el elemento de radio se mueva hacia arriba, lo que hace que no se alinee con los otros elementos circundantes. Ve a probarlo con varias entradas de radio una tras otra con otros elementos en los laterales.
— codenamezero
6

No usaría tablas para esto en absoluto. CSS puede hacer esto fácilmente.

Haría algo como esto:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Nota: He usado la clase clearfix de: http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
— Keith Donegan
fuente
Gracias por la respuesta, pero me temo que no resuelve el problema de alineación. Debería haber sido más claro. Mi objetivo es alinear verticalmente las casillas de verificación / botones de radio con sus etiquetas.
— Jan Zich
Puedes hacer esto con mi código. Juega con el margen de la etiqueta y también puedes agregarlo al elemento de entrada si quieres. Entonces la etiqueta {margin: 10px 0px 0px 10px; flotador izquierdo; } empujaría la etiqueta hacia abajo 10 píxeles.
— Keith Donegan
3
Puede hacer eso, pero uno de los puntos en la pregunta original era no asumir nada sobre los tamaños de los botones de radio / casillas de verificación. Lo más probable es que mi pregunta fuera demasiado optimista.
— Jan Zich
4

Esto es un truco, pero este CSS parece hacer que funcione muy bien en todos los navegadores al igual que el uso de tablas (aparte de Chrome)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

Asegúrese de usar etiquetas con sus radios para que funcione. es decir

<option> <label>My Radio</label>
— Justin Vincent
fuente
Lo de los medios me ayudó mucho con los dispositivos móviles. ¡Gracias!
— Sven van Zoelen
3

Si su etiqueta es larga y va en varias filas, establecer el ancho y la visualización: inline-block ayudará.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>
— Mika
fuente
2

Encontré que la mejor solución para esto era darle a la entrada una altura que coincida con la etiqueta. Al menos esto solucionó mi problema con las inconsistencias en Firefox e IE.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>
— Angus
fuente
La altura a juego arregló mis radios. Sin casillas de verificación, pero no preocupado, ya que nuestro site.css es bastante complejo.
— SushiGuy
2

El siguiente código debería funcionar :)

Saludos,

<style type = "text / css">
input [type = checkbox] {
    margen inferior: 4px;
    alineación vertical: medio;
}

etiqueta {
    alineación vertical: medio;
}
</style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Mostrar activos </label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Mostrar detectores </label> <br />
— Parentesco
fuente
1

Esta es una solución simple que me resolvió el problema:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}
— Dunx
fuente
1

Hay varias formas de implementarlo:

  1. Para ASP.NET Standard CheckBox:

    .tdInputCheckBox
{ 
position:relative;
top:-2px;
}
<table>
        <tr>
            <td class="tdInputCheckBox">                  
                <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
            </td>
        </tr>
</table>

  2. Para DevExpress CheckBox:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>

  3. Para RadioButtonList:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem>Yes</asp:ListItem>
   <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

  4. Para validadores de campo obligatorios: 

    <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
— Ajay Shankar
fuente
1

A continuación, insertaré una casilla de verificación de forma dinámica. El estilo se incluye para alinear la casilla de verificación y lo más importante para asegurarse de que el ajuste de palabras sea recto. lo más importante aquí es display: table-cell; para la alineación

El código visual básico.

'el código para insertar dinámicamente una casilla de verificación

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'crea la casilla de verificación

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'conecta la casilla de verificación

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'el estilo de la casilla de verificación

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

y la salida HTML

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>

— eilering
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.