Les projets récents impliquent la production de nombreux formulaires, notamment des cases à cocher et des radios. Cependant, au cours du processus de développement frontal, il a été découvert que les cases à cocher uniques (plusieurs) et le texte d'invite derrière elles ne peuvent pas être alignés sans aucun paramètre, et il existe une grande différence entre Firefox et IE. Même si vertical-align:middle est défini, il n'est toujours pas parfaitement aligné. Comme indiqué ci-dessous :
J'ai donc vérifié certains sites Web en ligne et constaté que ce problème est courant, comme indiqué ci-dessous (FF3.5) :
Dans de nombreuses pages de sites Web impliquant des formulaires, il existe un problème : les éléments du formulaire et le texte de l'invite ne peuvent pas être alignés. J'ai donc décidé d'étudier cette question. Tout d'abord, j'ai recherché l'article de Wheatlee senior " Tout le monde a des opinions différentes sur l'alignement vertical ". Dans son article, Wheatlee a mentionné les points clés suivants concernant le centrage vertical :
1. Lorsque vertical-align:middle est utilisé, le centre de l'élément est aligné avec le centre des éléments environnants.
2. La définition du "centre" ici est la suivante : l'image fait bien sûr la moitié de la hauteur et le texte doit être déplacé vers le haut de 0,5ex en fonction de la ligne de base, qui est le centre exact de la lettre minuscule "x". Cependant, de nombreux navigateurs définissent souvent l'unité ex comme 0,5em, de sorte qu'elle ne correspond pas nécessairement au centre exact de x (si vous ne comprenez pas des termes tels que ligne de base, veuillez d'abord lire l'article de Wheatlee)
En suivant cette idée et en comparant les problèmes que j'ai rencontrés, la première chose à laquelle j'ai pensé a été de vérifier si le navigateur utilise les mêmes règles de rendu des "cases à cocher" et des images (s'il traite la case à cocher comme une image carrée). J'ai donc écrit le code suivant :
<style>
corps{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
texte d'essai
Le testpic.gif dans le code est une image noire avec exactement la même taille que la case à cocher. L'affichage sous FF3.5 est le suivant :
