Centre de saisie du champ de saisie du texte HTML

Comment puis-je centrer l’alignement de l’espace réservé du champ de saisie dans un formulaire html?

J’utilise le code suivant, mais cela ne fonctionne pas:

CSS ->

input.placeholder { text-align: center; } .emailField { top:413px; right:290px; width: 355px; height: 30px; position: absolute; border: none; font-size: 17; text-align: center; } 

HTML ->

 
<!

Si vous ne voulez changer que le style d’espace réservé

 ::-webkit-input-placeholder { text-align: center; } :-moz-placeholder { /* Firefox 18- */ text-align: center; } ::-moz-placeholder { /* Firefox 19+ */ text-align: center; } :-ms-input-placeholder { text-align: center; } 
 input{ text-align:center; } 

est tout ce dont vous avez besoin

Exemple de travail dans FF6. Cette méthode ne semble pas compatible avec tous les navigateurs.

Votre CSS précédent essayait de centrer le texte d’un élément d’entrée qui avait une classe “espace réservé”.

L’élément d’espace réservé HTML5 peut être stylé pour les navigateurs qui acceptent l’élément, mais de différentes manières, comme vous pouvez le voir ici: http://davidwalsh.name/html5-placeholder-css .

Mais je ne crois pas que l’ text-align sera interprété par les navigateurs. Au moins sur Chrome, cet atsortingbut est ignoré. Mais vous pouvez toujours changer d’autres choses, comme la color , font-size font-family , font-family , etc. Je vous suggère de repenser votre conception si possible de supprimer ce comportement central.

MODIFIER

Si vous voulez vraiment centrer ce texte, vous pouvez toujours utiliser un code ou un plug-in jQuery pour simuler le comportement de l’espace réservé. En voici un exemple: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

De cette façon, le style fonctionnera:

 input.placeholder { text-align: center; } 

Cela fonctionne bien pour mes besoins, vous devriez vérifier la compatibilité pour votre navigateur, je n’ai pas eu de problèmes parce que je ne me souciais pas de la compatibilité descendante

 .inputclass::-webkit-input-placeholder { text-align: center; } .inputclass:-moz-placeholder { /* Firefox 18- */ text-align: center; } .inputclass::-moz-placeholder { /* Firefox 19+ */ text-align: center; } .inputclass:-ms-input-placeholder { text-align: center; } 

Vous pouvez faire comme ça:

  

Code de travailPen ici

 ::-webkit-input-placeholder { font-size: 14px; color: #d0cdfa; text-transform: uppercase; text-transform: uppercase; text-align: center; font-weight: bold; } :-moz-placeholder { font-size:14px; color: #d0cdfa; text-transform: uppercase; text-align: center; font-weight: bold; } ::-moz-placeholder { font-size: 14px; color: #d0cdfa; text-transform: uppercase; text-align: center; font-weight: bold; } :-ms-input-placeholder { font-size: 14px; color: #d0cdfa; text-transform: uppercase; text-align: center; font-weight: bold; } 

Vous pouvez essayer comme ceci:

 input[placeholder] { text-align: center; } 

vous pouvez aussi utiliser cette façon d’écrire css pour placeholder

 input::placeholder{ text-align: center; } 

input :: placeholder {text-align: center; }

a fonctionné correctement, @Ankit Jaiswal