居中 HTML 输入文本字段占位符
如何在 html 表单中将输入字段的占位符对齐居中？
我正在使用以下代码，但它不起作用：
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>
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 ->
<form action="" method="POST">
<input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
如果您只想更改占位符样式，请选择
::placeholder伪元素If you want to change only the placeholder style, select the
::placeholderpseudo-element就是你所需要的。
FF6 中的工作示例。此方法似乎不跨浏览器兼容。
您之前的 CSS 试图将具有“占位符”类的输入元素的文本居中。
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".
您也可以使用这种方式为占位符编写CSS
you can use also this way to write css for placeholder
您可以在如下所示的类中使用 set 并将其设置为输入文本类
CSS：
HTML：
You can use set in a class like below and set to input text class
CSS:
HTML:
HTML5 占位符元素可以针对接受该元素的浏览器进行样式设置，但方式不同，如下所示： http://davidwalsh.name/html5-placeholder-css。
但我不相信
text-align会被浏览器解释。至少在 Chrome 上，该属性被忽略。但是你总是可以改变其他的东西，比如color，font-size，font-family等。我建议你重新考虑你的设计是否可以删除这个中心行为。编辑
如果您确实希望此文本居中，您可以随时使用一些 jQuery 代码或插件来模拟占位符行为。以下是它的示例： http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html" hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html。
这样样式就可以工作了：
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-alignwill be interpreted by the browsers. At least on Chrome, this attribute is ignored. But you can always change other things, likecolor,font-size,font-familyetc. 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:
你可以这样做：
这里工作CodePen
You can make like this:
Working CodePen here
你可以这样尝试：
You can try like this :
对于占位符垂直居中：
For vertically centering the placeholder:
通过使用下面的代码片段，您可以选择输入中的占位符，并且放置在其中的任何代码只会影响占位符。
By using the code snippet below, you are selecting the placeholder inside your input, and any code placed inside will affect only the placeholder.