Este es uno de los problemas menores de CSS que me atormenta constantemente. ¿Cómo hacer la gente alrededor de desbordamiento de pila alinear verticalmente checkboxesy su labelsconstante entre navegadores ? Cada vez que los alineo correctamente en Safari (generalmente usando vertical-align: baselineel input), están completamente apagados en Firefox e IE. Solucionarlo en Firefox, y Safari e IE están inevitablemente en mal estado. Pierdo tiempo en esto cada vez que codifico un formulario.

Aquí está el código estándar con el que trabajo:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

Usualmente uso el reinicio de Eric Meyer, por lo que los elementos de formulario están relativamente limpios de anulaciones. ¡Esperamos cualquier consejo o truco que tenga para ofrecer!

Después de más de una hora de ajustar, probar y probar diferentes estilos de marcado, creo que puedo tener una solución decente. Los requisitos para este proyecto en particular fueron:

1. Las entradas deben estar en su propia línea.
2. Las entradas de las casillas de verificación deben alinearse verticalmente con el texto de la etiqueta de manera similar (si no es idéntico) en todos los navegadores.
3. Si el texto de la etiqueta se ajusta, debe sangrarse (por lo tanto, no debe ajustarse debajo de la casilla de verificación).

Antes de entrar en alguna explicación, solo te daré el código:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Aquí está el ejemplo de trabajo en JSFiddle .

Este código asume que está usando un reinicio como el de Eric Meyer que no anula los márgenes de entrada del formulario y el relleno (por lo tanto, coloca los reinicios de margen y relleno en el CSS de entrada). Obviamente, en un entorno en vivo, probablemente anidarás / anularás cosas para admitir otros elementos de entrada, pero quería mantener las cosas simples.

Cosas a tener en cuenta:

• los *overflow declaración es un hack de IE en línea (el hack de propiedad de estrella). Tanto IE 6 como 7 lo notarán, pero Safari y Firefox lo ignorarán correctamente. Creo que puede ser CSS válido, pero aún así es mejor con comentarios condicionales; solo lo usé por simplicidad.
• Lo mejor que puedo decir es que la única vertical-aligndeclaración que fue consistente en todos los navegadores fuevertical-align: bottom . Establecer esto y luego posicionarse relativamente hacia arriba se comportó de manera casi idéntica en Safari, Firefox e IE con solo un píxel o dos de discrepancia.
• El principal problema al trabajar con la alineación es que IE pega un montón de espacio misterioso alrededor de los elementos de entrada. No es relleno ni margen, y es muy persistente. Establecer un ancho y alto en la casilla de verificación y luegooverflow: hidden por alguna razón, corta el espacio extra y permite que el posicionamiento de IE actúe de manera muy similar a Safari y Firefox.
• Dependiendo del tamaño de su texto, sin duda necesitará ajustar la posición relativa, el ancho, la altura, etc. para que las cosas se vean bien.

¡Espero que esto ayude a alguien más! No he probado esta técnica específica en ningún proyecto que no sea en el que estaba trabajando esta mañana, así que sin duda si se encuentra algo que funcione de manera más consistente.

A veces, la alineación vertical necesita dos elementos en línea (span, etiqueta, entrada, etc.) uno al lado del otro para funcionar correctamente. Las siguientes casillas de verificación están correctamente centradas verticalmente en IE, Safari, FF y Chrome, incluso si el tamaño del texto es muy pequeño o grande.

Todos flotan uno al lado del otro en la misma línea, pero el recuadro significa que todo el texto de la etiqueta siempre permanece junto a la casilla de verificación.

La desventaja son las etiquetas SPAN sin sentido adicionales.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Ahora, si tuviera un texto de etiqueta muy largo que necesitara ajustarse sin ajustarse debajo de la casilla de verificación, usaría relleno y sangría de texto negativo en los elementos de la etiqueta:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Al trabajar con la solución de One Crayon , tengo algo que funciona para mí y es más simple:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Hace que píxel por píxel sea igual en Safari (en cuya línea de base confío) y tanto Firefox como IE7 funcionan como buenos. También funciona para varios tamaños de fuente de etiqueta, grandes y pequeños. Ahora, para arreglar la línea base de IE en selecciones y entradas ...

Actualización: (Edición de terceros)

¡La bottomposición adecuada depende de la familia de fuentes y el tamaño de fuente! Encontré que usar los elementos bottom: .08em;de casilla de verificación y radio es un buen valor general. Lo probé en Chrome / Firefox / IE11 en Windows con fuentes Arial y Calibri usando varios tamaños de fuente pequeños / medianos / grandes.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Una cosa fácil que parece funcionar bien es aplicar un ajuste de la posición vertical de la casilla de verificación con alineación vertical. Todavía variará según los navegadores, pero la solución es sencilla.

input {
    vertical-align: -2px;
}

Referencia

tratar vertical-align: middle

También parece que su código debería ser:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

Pruebe mi solución, lo probé en IE 6, FF2 y Chrome y se procesa píxel por píxel en los tres navegadores.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

La única solución que funciona perfectamente para mí es:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Probado hoy en Chrome, Firefox, Opera, IE 7 y 8. Ejemplo: Fiddle

No he probado completamente mi solución, pero parece funcionar muy bien.

Mi HTML es simplemente:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

Luego configuro todas las casillas de verificación 24pxpara altura y anchura. Para que el texto alineado hago la etiqueta es line-heighttambién 24pxy asignarvertical-align: top; este modo:

EDITAR: Después de las pruebas de IE, agregué vertical-align: bottom;a la entrada y cambié el CSS de la etiqueta. Puede encontrar que necesita un caso condicional de CSS CSS para ordenar el relleno, pero el texto y el cuadro están en línea.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Si alguien encuentra que esto no funciona, por favor hágamelo saber. Aquí está en acción (en Chrome e IE: disculpas porque las capturas de pantalla se tomaron en la retina y el uso de paralelos para IE):

Usualmente uso la altura de la línea para ajustar la posición vertical de mi texto estático:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Espero que ayude.

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

El truco es usar la alineación vertical solo en las celdas de la tabla o el bloque en línea si se usa la etiqueta de etiqueta.

Echemos un vistazo al origen del problema.

Las casillas de verificación se representan con imágenes (se pueden establecer las personalizadas a través de CSS). Aquí hay una casilla de verificación (sin marcar) en Firefox, resaltada con el inspector DOM:

Y aquí está la misma casilla de verificación sin estilo en Chrome:

Puedes ver el margen (naranja); el relleno no está presente (se mostraría en verde). Entonces, ¿qué es este pseudo-margen a la derecha y en la parte inferior de la casilla de verificación? Estas son partes de la imagen utilizada para la casilla de verificación . Es por eso que usa solovertical-align: middle no es suficiente y esa es la fuente de los problemas entre navegadores.

Entonces, ¿qué podemos hacer al respecto?

Una opción obvia es: ¡reemplazar las imágenes! Afortunadamente, uno puede hacer esto a través de CSS y reemplazarlos con imágenes externas, imágenes base64 (en CSS), svg en CSS o simplemente pseudoelementos. Es un enfoque robusto (¡navegador cruzado!), Y aquí hay un ejemplo de tal ajuste robado de esta pregunta :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Es posible que desee leer algunos artículos más detallados sobre este estilo, como algunos que se enumeran aquí ; está fuera del alcance de esta respuesta.

Ok, ¿qué pasa con la solución no-custom-images-or-pseudo-elements?

TL; DR: parece que esto no funcionará, use la casilla de verificación personalizada en su lugar

Primero, observemos que si en otros navegadores esos pseudo márgenes dentro del icono de la casilla de verificación fueran arbitrarios, no habría una solución consistente. Para construir uno, tenemos que explorar la anatomía de tales imágenes en los navegadores existentes.

Entonces, ¿qué navegadores tienen los pseudo márgenes en las casillas de verificación? He comprobado Chrome 75, Vivaldi 2.5 (basado en cromo), FireFox 54 (no pregunte por qué está tan desactualizado), IE 11, Edge 42, Safari. (tomé prestado uno por un minuto, olvidé revisar la versión). Solo Chrome y Vivaldi tienen tales pseudo-márgenes (sospecho que todos los navegadores basados ​​en Chromium también, como Opera).

¿Cuál es el tamaño de esos pseudo márgenes? Para resolver esto, uno puede usar una casilla de verificación ampliada:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

mi resultado es ~ 7% del ancho / alto y, por lo tanto, 0.9-1.0px en unidades absolutas. Sin embargo, la precisión puede ser cuestionada: pruebe diferentes valores de zoompara la casilla de verificación. En mis pruebas en Chrome y Vivaldi, el tamaño relativo del pseudo margen es muy diferente en los zoomvalores 10, 20 y en los valores 11-19 (??):

scale parece ser más consistente:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

entonces probablemente ~ 14% y 2px son los valores correctos.

Ahora que sabemos (?) El tamaño del pseudo margen, tengamos en cuenta que esto no es suficiente. ¿Los tamaños de los íconos de las casillas de verificación son los mismos para todos los navegadores? ¡Pobre de mí! Esto es lo que muestra el inspector DOM para las casillas de verificación sin estilo:

• FireFox: 13.3px
• Basado en cromo: 12.8 px para todo, por lo tanto 12.8 (100% - 14%) = 11 px para lo que se percibe visualmente como casilla de verificación
• IE 11, Edge: 13px
• Safari: n / a (creo que deberían compararse en la misma pantalla)

Ahora, antes de discutir cualquier solución o truco, preguntémonos: ¿cuál es el correcto? alineación ? ¿Qué queremos lograr? Hasta cierto punto es una cuestión de gustos, pero básicamente puedo pensar en los siguientes aspectos de alineaciones "agradables":

texto y casilla de verificación en la misma línea de base (deliberadamente no ajusto el tamaño de la casilla de verificación aquí):

o tener la misma línea media en términos de letras minúsculas:

o la misma línea media en términos de letras mayúsculas (es más fácil ver la diferencia para diferentes tamaños de fuente):

y también tenemos que decidir si el tamaño de la casilla de verificación debe ser igual a la altura de una letra minúscula, mayúscula o algo más (más grande, más pequeño o entre minúsculas y mayúsculas).

Para esta discusión, llamemos a una alineación agradable si la casilla de verificación está en la misma línea de base que el texto y tiene el tamaño de una letra mayúscula (una opción muy discutible):

Ahora qué herramientas tenemos para:

1. ajustar el tamaño de la casilla de verificación
2. reconocer Chromium con su casilla de verificación pseudo-marginada y establecer estilos específicos
3. ajustar la casilla de verificación / etiquetar la alineación vertical

?

1. En cuanto al ajuste del tamaño de casilla : existen width, height, size, zoom, scale(me he perdido algo?). zoomy scaleno permiten establecer el tamaño absoluto, por lo que pueden ayudar solo a ajustar el tamaño del texto, no establecer el tamaño del navegador cruzado (a menos que podamos escribir reglas específicas del navegador). sizeno funciona con Chrome (¿funcionó con IE antiguo? de todos modos, no es tan interesante). widthy heightfunciona en Chrome y otros navegadores, por lo que podemos establecer un tamaño común, pero de nuevo, en Chrome establece el tamaño de toda la imagen, no la casilla de verificación en sí. Nota: es mínimo (ancho, alto) que define el tamaño de una casilla de verificación (si ancho ≠ alto, el área fuera del cuadrado de la casilla de verificación se agrega al "pseudo-margen").

   Una cosa desafortunada es que, por lo que puedo ver, los pseudo márgenes en la casilla de verificación de Chrome no están configurados en cero para ningún ancho y altura.

2. Me temo que actualmente no hay un método confiable de CSS solamente .

3. Consideremos la alineación vertical. vertical-alignno puede dar resultados consistentes cuando se establece en middleo baselinedebido al pseudo margen de Chrome, la única opción real para obtener el mismo "sistema de coordenadas" para todos los navegadores es alinear la etiqueta y la entrada a top:

   

   (en la imagen: alineación vertical: superior, inferior e inferior sin recuadro)

Entonces, ¿qué resultado obtenemos de esto?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

El fragmento anterior funciona con Chrome (navegadores basados ​​en cromo), pero otros navegadores requieren un tamaño más pequeño de la casilla de verificación. Parece ser imposible ajustar tanto el tamaño como la alineación vertical de una manera que funcione en torno a la peculiaridad de la casilla de verificación de Chromium. Mi sugerencia final es: use casillas de verificación personalizadas en su lugar, y evitará la frustración :)

Ahora que flexbox es compatible con todos los navegadores modernos, algo como esto me parece un enfoque más fácil.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Aquí está la demostración completa de la versión prefijada:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Creo que esta es la forma más fácil.

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

No me gusta el posicionamiento relativo porque hace que el elemento se represente por encima de todo lo demás en su nivel (puede obtener algo superior si tiene un diseño complejo).

He descubierto que las vertical-align: subcasillas de verificación se ven lo suficientemente bien alineadas en Chrome, Firefox y Opera. No puedo verificar Safari ya que no tengo MacOS e IE10 está ligeramente apagado, pero he encontrado que es una solución lo suficientemente buena para mí.

Otra solución podría ser tratar de crear CSS específico para cada navegador y ajustarlo con una alineación vertical en% / pixels / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Esto funciona bien para mi:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

La respuesta elegida con más de 400 votos a favor no funcionó para mí en Chrome 28 OSX, probablemente porque no se probó en OSX o porque funcionó en lo que sea que existiera en 2008 cuando se respondió esta pregunta.

Los tiempos han cambiado, y las nuevas soluciones CSS3 ahora son factibles. Mi solución usa pseudoelementos para crear una casilla de verificación personalizada . Entonces, las estipulaciones (pros o contras, como quiera que lo mires) son las siguientes:

• Solo funciona en navegadores modernos (FF3.6 +, IE9 +, Chrome, Safari)
• Se basa en una casilla de verificación diseñada a medida, que se representará exactamente igual en cada navegador / sistema operativo. Aquí acabo de elegir algunos colores simples, pero siempre se pueden agregar degradados lineales y demás para darle más explosión.
• Está orientado a una determinada fuente / tamaño de fuente, que si se cambia, simplemente cambiaría la posición y el tamaño de la casilla de verificación para que parezca alineada verticalmente. Si se ajusta correctamente, el resultado final debería ser casi exactamente el mismo en todos los navegadores / sistemas operativos.
• Sin propiedades de alineación vertical, sin flotadores
• Debo usar el marcado proporcionado en mi ejemplo, no funcionará si está estructurado como la pregunta, sin embargo, el diseño se verá esencialmente igual. Si desea mover cosas, también deberá mover el CSS asociado

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Esta solución oculta la casilla de verificación y agrega y aplica estilos a los pseudoelementos a la etiqueta para crear la casilla de verificación visible. Debido a que la etiqueta está vinculada a la casilla de verificación oculta, el campo de entrada aún se actualizará y el valor se enviará con el formulario.

Y si está interesado, aquí está mi opinión sobre los botones de radio: http://jsfiddle.net/DtKrV/2/

¡Espero que alguien encuentre esto útil!

Nunca he tenido un problema al hacerlo así:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

Si utiliza ASP.NET Web Forms , no necesita preocuparse por los DIV y otros elementos o tamaños fijos. Podemos alinear el <asp:CheckBoxList>texto configurandofloat:left el tipo de entrada CheckboxList en CSS.

Por favor verifique el siguiente código de ejemplo:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Código .ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

Si usa Twitter Bootstrap, puede usar la checkboxclase en <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Con una casilla de verificación de tipo de entrada envuelta dentro de la etiqueta y flotando a la izquierda de la siguiente manera:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

esto funcionó para mí:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Asegúrese de que la altura de la es idéntica a la altura de la línea del (nivel de bloque).

Codifique la altura y el ancho de la casilla de verificación, quite su relleno y haga que su altura más los márgenes verticales sean iguales a la altura de la línea de la etiqueta. Si el texto de la etiqueta está en línea, flote la casilla de verificación. Firefox, Chrome e IE7 + muestran el siguiente ejemplo de forma idéntica: http://www.kornea.com/css-checkbox-align

Por lo general, dejo una casilla sin etiquetar y luego hago que su "etiqueta" sea un elemento separado. Es un dolor, pero hay tanta diferencia entre navegadores entre la forma en que se muestran las casillas de verificación y sus etiquetas (como habrás notado) que esta es la única forma en que puedo acercarme a controlar cómo se ve todo.

También termino haciendo esto en el desarrollo de winforms, por la misma razón. Creo que el problema fundamental con el control de la casilla de verificación es que en realidad son dos controles diferentes: el cuadro y la etiqueta. Al usar una casilla de verificación, le corresponde a los implementadores del control decidir cómo se muestran esos dos elementos uno al lado del otro (y siempre se equivocan, donde está mal = no es lo que quieres).

Realmente espero que alguien tenga una mejor respuesta a tu pregunta.

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

El código anterior colocará los elementos de su lista en tres grupos y solo cambiará los anchos para adaptarse.

Lo siguiente proporciona una consistencia perfecta en píxeles en todos los navegadores, incluso IE9:

El enfoque es bastante sensato, hasta el punto de ser obvio:

1. Crea una entrada y una etiqueta.
2. Muestrelos como bloque, para que pueda flotarlos como desee.
3. Establezca la altura y la altura de la línea en el mismo valor para asegurarse de que se centren y alineen verticalmente.
4. Para las medidas em , para calcular la altura de los elementos, el navegador debe conocer la altura de la fuente para esos elementos, y no debe establecerse en las medidas em.

Esto da como resultado una regla general aplicable a nivel mundial:

input, label {display:block;float:left;height:1em;line-height:1em;}

Con tamaño de fuente adaptable por formulario, conjunto de campos o elemento.

#myform input, #myform label {font-size:20px;}

Probado en los últimos Chrome, Safari y Firefox en Mac, Windows, Iphone y Android. Y IE9.

Es probable que este método sea aplicable a todos los tipos de entrada que no sean más altos que una línea de texto. Aplica una regla de tipo a tu medida.

Así que sé que esto ha sido respondido muchas veces, pero siento que tengo una solución mucho más elegante que las que ya se han proporcionado. Y no solo 1 solución elegante, sino 2 soluciones separadas para hacerle cosquillas. Dicho esto, todo lo que necesita saber y ver está contenido en 2 JS Fiddle's, con comentarios.

La solución n. ° 1 se basa en la "casilla de verificación" nativa del navegador dado, aunque con un giro ... Está contenida en un div que es más fácil de colocar en el navegador cruzado, con un desbordamiento: oculto para cortar el exceso de una casilla de verificación estirada de 1 px (Esto es para que no puedas ver los feos bordes de FF)

HTML simple: (siga el enlace para revisar el CSS con comentarios, el bloque de código es para satisfacer stackoverflow) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

La solución n. ° 2 utiliza el "Hack de alternancia de casilla de verificación" para alternar el estado CSS de un DIV, que se ha posicionado correctamente en el navegador, y se configura con un sprite simple para la casilla de verificación desmarcada y marcada. Todo lo que se necesita es ajustar la posición del fondo con dicho Hack de alternancia de casilla de verificación. Esta, en mi opinión, es la solución más elegante, ya que tiene más control sobre sus casillas de verificación y radios, y puede garantizar que se vean iguales en todo el navegador.

HTML simple: (siga el enlace para revisar el CSS con comentarios, el bloque de código es para satisfacer StackOverflow) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

Si alguien no está de acuerdo con estos métodos, por favor déjenme un comentario, me encantaría escuchar algunos comentarios sobre por qué otros no han encontrado estas soluciones, o si lo han hecho, ¿por qué no veo respuestas aquí sobre ellas? Si alguien ve que uno de estos métodos falla, sería bueno verlo también, pero estos han sido probados en los últimos navegadores y se basan en métodos HTML / CSS que son bastante antiguos y universales hasta donde yo he visto.

Yay gracias! Esto también me ha estado volviendo loco por siempre.

En mi caso particular, esto funcionó para mí:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

Estoy usando reset.css, lo que podría explicar algunas de las diferencias, pero esto parece funcionar bien para mí.

position: relative; tiene algunos problemas en IE con z-index y animaciones como jQuery's slideUp / slideDown.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

El estilo probablemente necesita ajustes dependiendo del tamaño de fuente utilizado en <label>

PD:
uso ie7js para hacer que el css funcione en IE6.

Use simplemente vertical-align: sub, como pokrishka ya sugirió.

Violín

Código HTML:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

Código CSS:

.checkboxes input {
    vertical-align: sub;
}

Solución simple:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Probado en Chrome, Firefox, IE9 +, Safari, iOS 9+