html text field,Center HTML Input Text Field Placeholder
问题
How can I centre the input field's placeholder's alignment in a html form?
I am using the following code, but it doesn't work:
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 ->
回答1:
If you want to change only the placeholder style
::-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;
}
回答2:
input{
text-align:center;
}
is all you need.
Working example in FF6. This method doesn't seem to be cross-browser compatible.
Your previous CSS was attempting to center the text of an input element which had a class of "placeholder".
回答3:
The HTML5 placeholder element can be styled for those browsers that accept the element, but in diferent ways, as you can see here: http://davidwalsh.name/html5-placeholder-css.
But I don't believe that text-align will be interpreted by the browsers. At least on Chrome, this attribute is ignored. But you can always change other things, like color, font-size, font-family etc. I suggest you rethinking your design whether possible to remove this center behavior.
EDIT
If you really want this text centered, you can always use some jQuery code or plugin to simulate the placeholder behavior. Here is a sample of it: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
This way the style will work:
input.placeholder {
text-align: center;
}
回答4:
You can make like this:
Working CodePen here
回答5:
It works fine for my needs, you should check compatibility for your browser,
I didn't have issues because i didn't care for backward compatibility
.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;
}
回答6:
you can use also this way to write css for placeholder
input::placeholder{
text-align: center;
}
回答7:
You can try like this :
input[placeholder] {
text-align: center;
}
回答8:
::-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;
}
回答9:
By using the code snippet below, you are selecting the placeholder inside your input, and any code placed inside will affect only the placeholder.
input::-webkit-input-placeholder {
text-align: center
}
来源：https://stackoverflow.com/questions/7381446/center-html-input-text-field-placeholder