Los proyectos recientes implican la producción de muchas formas, especialmente casillas de verificación y radios. Sin embargo, durante el proceso de desarrollo del front-end, se descubrió que las casillas de verificación únicas (múltiples) y el texto emergente detrás de ellas no se pueden alinear sin ninguna configuración, y existe una gran diferencia entre Firefox e IE. Incluso si se establece vertical-align:middle, todavía no está perfectamente alineado. Como se muestra a continuación:
Así que revisé algunos sitios web en línea y descubrí que este problema es común, como se muestra a continuación (FF3.5):
En muchas páginas de sitios web que incluyen formularios, existe el problema de que los elementos del formulario y el texto del mensaje no se pueden alinear. Entonces decidí estudiar este tema. En primer lugar, busqué el artículo del senior Wheatlee " Todos tienen opiniones diferentes sobre la alineación vertical ". En su artículo, Wheatlee mencionó los siguientes puntos clave sobre el centrado vertical:
1. Cuando se utiliza vertical-align:middle, el centro del elemento se alinea con el centro de los elementos circundantes.
2. La definición de "centro" aquí es: la imagen tiene, por supuesto, la mitad de la altura y el texto debe moverse hacia arriba 0,5 ex según la línea de base, que es el centro exacto de la letra minúscula "x". Sin embargo, muchos navegadores suelen definir la unidad ex como 0,5 em, por lo que no es necesariamente el centro exacto de x (si no comprende términos como línea de base, lea primero el artículo de Wheatlee).
Siguiendo esta idea y comparando los problemas que encontré, lo primero que pensé fue en verificar si el navegador usa las mismas reglas para representar "casillas de verificación" e imágenes (si trata las casillas de verificación como una imagen cuadrada). Entonces escribí el siguiente código:
<estilo>
cuerpo {font-size:12px;}
</estilo>
<estilo de entrada="alineación vertical: medio;" nombre="prueba" tipo="casilla de verificación">
<img estilo="vertical-align:middle;" src="testpic.gif" />
texto de prueba
El testpic.gif en el código es una imagen negra con exactamente el mismo tamaño que la casilla de verificación. La pantalla bajo FF3.5 es la siguiente:
