居中 HTML 输入文本字段占位符

Question

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

原文由 max_ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您只想更改占位符样式，请选择 ::placeholder 伪元素

::placeholder {
   text-align: center;
}

/* or, for legacy browsers */

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

原文由 prarthana.m 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

input{
   text-align:center;
}

是你所需要的全部。

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

您之前的 CSS 试图将具有“占位符”类的输入元素的文本居中。

原文由 Jamie Dixon 发布，翻译遵循 CC BY-SA 3.0 许可协议