中心HTMLinput文本字段占位符

我怎样才能中心的input字段的占位符在HTML格式的alignment？

我正在使用下面的代码，但它不起作用：

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="[e-mail]" style="text-align: center" name="email" /> <!<input type="submit" value="submit" /> </form> 

Answer 1

如果您只想更改占位符样式

 ::-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; } 

是你所需要的全部。

FF6中的工作示例 这种方法似乎不是跨浏览器兼容的。

你以前的CSS试图把一个具有“占位符”类的input元素的文本居中。

Answer 3

HTML5占位符元素可以为那些接受元素的浏览器设置样式，但是以不同的方式，您可以在这里看到： http : //davidwalsh.name/html5-placeholder-css 。

但我不相信浏览器会解释text-align 。 至less在Chrome上，这个属性被忽略。 但是你总是可以改变其他的东西，比如color ， font-size ， font-family等。我build议你重新思考你的devise是否有可能消除这种中心行为。

编辑

如果你真的想要这个文本居中，你总是可以使用一些jQuery代码或插件来模拟占位符的行为。 这是它的一个样本： http : //www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 。

这样的风格将工作：

 input.placeholder { text-align: center; } 

Answer 4

它适合我的需求，你应该检查您的浏览器兼容性，我没有问题，因为我不在乎向后兼容性

 .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; } 

Answer 5

你可以这样做：

  <center> <form action="" method="POST"> <input type="text" class="emailField" placeholder="[e-mail]" style="text-align: center" name="email" /> <input type="submit" value="submit" /> </form> </center> 

在这里工作CodePen

Answer 6

 ::-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; } 

Answer 7

你可以这样尝试：

 input[placeholder] { text-align: center; }