居中的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="support@socialpic.org" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>
max_
已编辑的问题 11日 九月 2011 в 9:46
编程
html css
11日 九月 2011 в 9:41
尚无意见
解决办法

如果你只想改变占位符样式

::-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; 
}
Volker E.
编辑本段答案14日 十月 2014 в 4:56
评论(1)
 
input{
   text-align:center;
}

就是你所需要的一切。

[工作实例][1] 在FF6中。这种方法似乎并不跨浏览器兼容。

你之前的CSS试图将一个输入元素的文本居中，该元素的类别为"占位符"。

Jamie Dixon
编辑本段答案11日 九月 2011 в 9:53
评论(9)

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

但我不相信text-align会被浏览器解释。至少在Chrome上，这个属性被忽略了。但你总是可以改变其他东西，如颜色、字体大小、字体家族等。我建议你重新考虑你的设计，是否有可能去除这个中心行为。

编辑

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

这样一来，这个样式就可以工作了。

input.placeholder {
    text-align: center;
}
Erick Petrucelli
编辑本段答案11日 九月 2011 в 9:53
评论(0)