Pregunta Alineación de casilla de verificación / radio 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>

Esto puede ser desaprobado por algunos. Acabo de pasar un tiempo (una vez más) investigando una solución sin tabla, pero fallé. Probé varias combinaciones de flotadores, posicionamiento absoluto / relativo y enfoques similares. No solo se basó principalmente en una altura estimada de los botones de opción / casillas de verificación, sino que también se comportó de manera diferente en diferentes navegadores. Idealmente, me gustaría encontrar una solución que no asuma nada sobre tamaños o caprichos especiales del navegador. Estoy bien con el uso de tablas, pero me pregunto dónde hay otra solución.


76
2017-12-28 17:40


origen


Respuestas:


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 desajustes visibles a pesar de que debería funcionar teóricamente. La especificación CSS2 dice que:

vertical-alinear: medio: Alinee el punto medio vertical de la caja con la línea base del cuadro principal más la mitad de la altura x del elemento primario.

Por lo tanto, debe estar en el centro perfecto (la altura x es la altura del carácter x). Sin embargo, el problema parece ser causado por el hecho de que los navegadores comúnmente agregan algunos márgenes irregulares al azar a los botones de radio y casillas de verificación. Uno puede verificar, por ejemplo en Firefox usando Firebug, que el margen predeterminado de la casilla de verificación 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, uno necesita deshacerse de estos márgenes:

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

Todavía es interesante observar que en la solución basada en tablas los márgenes se comen de alguna manera y todo se alinea muy bien.


116
2018-05-20 21:55



Los siguientes trabajos 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;
}

31
2017-10-28 15:02



La mejor y más fácil forma de hacerlo es esta porque no necesitas agregar etiquetas, divisiones ni nada.

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


13
2017-12-28 18:07



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

6
2017-07-08 22:34



Esto es un truco, pero este CSS parece funcionar 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>

4
2018-01-09 13:07



Si su etiqueta es larga y va en varias filas, establezca el ancho y la visualización: bloque en línea 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>

3
2017-10-21 23:38



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

2
2018-04-19 19:20



El siguiente código debería funcionar :)

Saludos,



<style type = "text / css">
entrada [tipo = casilla de verificación] {
    margen inferior: 4px;
    vertical-alinear: medio;
}

etiqueta {
    vertical-alinear: 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 />

2
2018-06-21 08:27



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

label 
{

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

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

padding-bottom:7px; 

}

1
2017-11-29 21:25



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

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

1
2018-01-06 07:21



A continuación, insertaré una casilla de verificación dinámicamente. 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 directo. 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

'crear 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 para 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 de 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>


1
2017-08-22 10:42