text-align:center ne fonctionnera pas avec la balise form <label> (?)

J'étais en train de parcourir un site que je venais de terminer et de résoudre certains problèmes d'accessibilité. J'avais un formulaire:

<input type="hidden" name="redirect" value="thank-you.php" />
<p>Enter your Email Address to receive our Weekly Newsletter</p>  
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

Cela a été signalé car il n'y a pas de balise pour identifier le champ de saisie permettant de saisir l'adresse e-mail. J'ai donc changé le

balise à une balise comme ceci :

<input type="hidden" name="redirect" value="thank-you.php" />
<label for="formifemail">Enter your Email Address to receive our Weekly Research</label>  
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

et le CSS :

#formItem label {
 text-align:center;
 line-height:150%;
 font-size:.85em;
}

Mais le texte apparaît justifié à gauche et non centré. J'ai regardé autour de moi qu'il n'y avait pas de bugs évidents. Cela se produit à la fois dans FF 3.x et IE 7.x

Solution du problème

C'est parce labelqu'il s'agit d'un élément en ligne et qu'il est donc aussi grand que le texte qu'il contient.

Le possible est d'afficher votre labelcomme un élément de bloc comme ceci:

#formItem label {
 display: block;
 text-align: center;
 line-height: 150%;
 font-size:.85em;
}

Cependant, si vous souhaitez utiliser l'étiquette sur la même ligne avec d'autres éléments, vous devez soit définir display: inline-block;et lui donner une largeur explicite (ce qui ne fonctionne pas sur la plupart des navigateurs), soit vous devez l'envelopper à l'intérieur d'un divet faire le alignement dans le div.