中心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="support@socialpic.org" style="text-align: center" name="email" /> <!<input type="submit" value="submit" /> </form> 

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

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

是你所需要的全部。

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

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

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

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

编辑

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

这样的风格将工作:

 input.placeholder { text-align: center; } 

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

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

你可以这样做:

  <center> <form action="" method="POST"> <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" /> <input type="submit" value="submit" /> </form> </center> 

在这里工作CodePen

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

你可以这样尝试:

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