Cómo alinear las casillas de verificación y sus etiquetas de manera coherente entre navegadores

Solución:

¡Advertencia! Esta respuesta es demasiado viejo y no funciona en navegadores modernos.

No soy el póster de esta respuesta, pero en el momento de escribir esto, esta es la respuesta más votada con diferencia tanto en votos positivos como negativos (+1035-17), y todavía está marcada como respuesta aceptada (probablemente porque el cartel original de la pregunta es el que escribió esta respuesta).

Como ya se señaló muchas veces en los comentarios, esta respuesta ya no funciona en la mayoría de los navegadores (y parece que no lo hace desde 2013).

---

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 idéntica) en todos los navegadores.
3. Si el texto de la etiqueta se ajusta, debe tener una sangría (por lo que no se debe ajustar debajo de la casilla de verificación).

Antes de entrar en una explicación, solo le 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á utilizando un restablecimiento como el de Eric Meyer que no anula los márgenes y el relleno del formulario de entrada (por lo tanto, coloca los restablecimientos de margen y relleno en el CSS de entrada). Obviamente, en un entorno en vivo, probablemente anidará / anulará cosas para admitir otros elementos de entrada, pero quería mantener las cosas simples.

Cosas a tener en cuenta:

• los *overflow La declaración es un truco de IE en línea (el truco de propiedad de estrella). Tanto IE 6 como 7 lo notarán, pero Safari y Firefox lo ignorarán correctamente. Creo que podría ser CSS válido, pero aún está mejor con comentarios condicionales; solo lo usé por simplicidad.
• Lo mejor que puedo decir, el único vertical-align declaración que era coherente en todos los navegadores era vertical-align: bottom. Establecer esto y luego posicionarlo relativamente hacia arriba se comportó casi de manera idéntica en Safari, Firefox e IE con solo uno o dos píxeles de discrepancia.
• El principal problema al trabajar con la alineación es que IE tiene un montón de espacio misterioso alrededor de los elementos de entrada. No es relleno ni margen, y es malditamente persistente. Establecer un ancho y alto en la casilla de verificación y luego overflow: 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 el que estaba trabajando esta mañana, así que definitivamente póngalo si encuentra algo que funcione de manera más consistente.

---

¡Advertencia! Esta respuesta es demasiado viejo y no funciona en navegadores modernos.

A veces, la alineación vertical necesita dos elementos en línea (intervalo, 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 nowrap significa que todo el texto de la etiqueta siempre permanece al lado de la casilla de verificación.

La desventaja son las etiquetas SPAN extra sin sentido.

.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 tuvieras un texto de etiqueta muy largo que necesario para ajustar sin ajustar 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>

Trabajando con la solución de One Crayon, tengo algo que me funciona 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>

Representa píxel por píxel de la misma manera en Safari (en cuya línea de base confío) y tanto Firefox como IE7 son tan buenos. También funciona para varios tamaños de fuentes de etiquetas, grandes y pequeñas. Ahora, para corregir la línea de base de IE en selecciones y entradas …

---

Actualizar: (Edición de terceros)

El correcto bottom ¡la posición depende de la familia de fuentes y del tamaño de fuente! Encontré usando bottom: .08em; para casillas de verificación y elementos de 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>

---

---

Utiliza Nuestro Buscador