Centre HTML Champ de saisie de texte

Question

Comment 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 ->

 <form action="" method="POST">
    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>
 

Answer 1

Si vous souhaitez modifier uniquement 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; 
}
 

Answer 2

 input{
   text-align:center;
}
 

c'est tout ce dont vous avez besoin.

Exemple de travail en FF6. Cette méthode ne semble pas être compatible avec plusieurs navigateurs.

Votre précédente CSS tentait de centrer le texte d'un élément d'entrée ayant une classe "placeholder".

Answer 3

Le HTML5 espace réservé à l'élément de style pour les navigateurs qui acceptent l'élément, mais de différentes façons, comme vous pouvez le voir ici: http://davidwalsh.name/html5-placeholder-css.

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

MODIFIER

Si vous voulez vraiment ce texte centré, vous pouvez toujours utiliser une jQuery code ou un plugin pour simuler l'espace réservé comportement. Voici un échantillon: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

De cette façon, le style de travail:

input.placeholder {
    text-align: center;
}