Los proyectos recientes implican una gran producción de formularios, especialmente casillas de verificación y cuadros de radio. Sin embargo, durante el proceso de desarrollo front-end, se descubrió que las casillas de verificación individuales (complejas) y el texto rápido detrás de ellas no podían alinearse sin ninguna configuración, y hubo una gran diferencia entre Firefox e IE. Incluso si el alineado vertical: el medio está establecido, aún no se puede alinear perfectamente. Como se muestra en la figura a continuación:
Así que revisé algunos sitios web en línea y descubrí que este problema es común, como se muestra en la figura a continuación (FF3.5):
En muchos sitios web, existe el problema de que los elementos de formulario no pueden alinearse con el texto de inmediato. Así que planeo estudiar este problema. Primero, busqué el artículo "Todos dicen que todos se alineen vertical" de Senior Wheatlee. En su artículo, Wheatlee mencionó varios puntos clave sobre el centrado vertical:
1. Cuando vertical-alinee: medio, el centro del elemento está alineado con el centro de los elementos circundantes.
2. La definición del centro aquí es: la imagen es, por supuesto, la mitad de la altura, y el texto debe moverse hacia arriba por 0.5EX en función de la línea de base, es decir, el centro de la letra minúscula x. Sin embargo, muchos navegadores a menudo definen la unidad de EX como 0.5em, por lo que no es necesariamente el centro de X (si no comprende los sustantivos como la línea de base, lea primero el artículo de Wheatlee)
Según esta idea, en comparación con los problemas que encontré, lo primero que me viene a la mente es verificar si el navegador usa las mismas reglas para las casillas de verificación y las imágenes para representar (si trata las casillas de verificación como una imagen cuadrada). Entonces escribí el siguiente código:
<estilo>
Cuerpo {Font-Size: 12px;}
</style>
<input style = vertical-align: Middle; nombre = Test Type = CheckBox>
<img style = vertical-align: Middle; src = testPic.gif />
Texto de prueba
TestPic.gif en el código es una imagen negra con exactamente el mismo tamaño que la casilla de verificación. La siguiente pantalla en FF3.5:
Página anterior 1 2 3 4 Página siguiente Lea el texto completo