Wie kann ich die Ausrichtung des Platzhalters eines Eingabefeldes in einem HTML-Formular zentrieren?
Ich verwende den folgenden Code, aber es funktioniert nicht:
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="[email protected]" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
Wenn Sie nur den Platzhalterstil ändern möchten
::-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;
}
ist alles, was Sie brauchen.
[Arbeitsbeispiel][1] in FF6. Diese Methode scheint nicht cross-browser-kompatibel zu sein.
Ihr bisheriges CSS hat versucht, den Text eines Eingabeelements mit der Klasse "Platzhalter" zu zentrieren.
Das HTML5-Platzhalterelement kann für die Browser, die das Element akzeptieren, auf unterschiedliche Weise gestaltet werden, wie Sie hier sehen können: http://davidwalsh.name/html5-placeholder-css.
Aber ich glaube nicht, dass text-align
von den Browsern interpretiert wird. Zumindest bei Chrome wird dieses Attribut ignoriert. Aber Sie können immer andere Dinge ändern, wie color
, font-size
, font-family
usw. Ich schlage vor, Sie überdenken Ihr Design, ob es möglich ist, dieses zentrierte Verhalten zu entfernen.
EDIT
Wenn Sie den Text wirklich zentriert haben wollen, können Sie immer einen jQuery-Code oder ein Plugin verwenden, um das Platzhalterverhalten zu simulieren. Hier ist ein Beispiel dafür: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
Auf diese Weise wird der Stil funktionieren:
input.placeholder {
text-align: center;
}