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

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

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.

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

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

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

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>

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>

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>

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

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; 

}

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

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>

@sfjedi

Creé una clase y le asigné los valores css.

.radioA{
   vertical-align: middle;
}

Está funcionando y puedes comprobarlo en el siguiente enlace. http://jsfiddle.net/gNVsC/ Espero que haya sido útil.