居中 HTML 输入文本字段占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7381446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center HTML Input Text Field Placeholder
提问by max_
How can I centre the input field's placeholder's alignment in a html form?
如何在 html 表单中将输入字段的占位符对齐居中？
I am using the following code, but it doesn't work:
我正在使用以下代码，但它不起作用：
CSS ->
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 ->
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>
回答by prarthana.m
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;
}
回答by Jamie Dixon
input{
text-align:center;
}
is all you need.
是你所需要的全部。
Working examplein FF6. This method doesn't seem to be cross-browser compatible.
FF6 中的工作示例。这种方法似乎不跨浏览器兼容。
Your previous CSS was attempting to center the text of an input element which had a class of "placeholder".
您之前的 CSS 试图将具有“占位符”类的输入元素的文本居中。
回答by Erick Petrucelli
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.
HTML5 占位符元素可以为接受该元素的浏览器设置样式，但方式不同，如您在此处所见：http: //davidwalsh.name/html5-placeholder-css。
But I don't believe that text-alignwill 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-familyetc. I suggest you rethinking your design whether possible to remove this center behavior.
但我不相信这text-align会被浏览器解释。至少在 Chrome 上，这个属性会被忽略。但是，你可以随时更改其他的东西，比如color，font-size，font-family等我建议你重新考虑你的设计是否可以删除该中心的行为。
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.
如果你真的想让这个文本居中，你总是可以使用一些 jQuery 代码或插件来模拟占位符行为。这是它的一个示例：http: //www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html。
This way the style will work:
这样风格就会起作用：
input.placeholder {
text-align: center;
}
回答by Ian David Bocioaca
You can make like this:
你可以这样：
<center>
<form action="" method="POST">
<input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
<input type="submit" value="submit" />
</form>
</center>
回答by Denis
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;
}
回答by Ankit Jaiswal
you can use also this way to write css for placeholder
您也可以使用这种方式为占位符编写 css
input::placeholder{
text-align: center;
}
回答by Rani Utami
You can try like this :
你可以这样尝试：
input[placeholder] {
text-align: center;
}
回答by Rudresh Bhatt
::-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;
}
回答by Brandon May
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
}
回答by Mohammad Daliri
You can use set in a class like below and set to input text class
CSS:
您可以在如下所示的类中使用 set 并设置为输入文本类
CSS：
.place-holder-center::placeholder {
text-align: center;
}
HTML:
HTML：
<input type="text" class="place-holder-center">
