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

【问题标题】：Center HTML Input Text Field Placeholder居中 HTML 输入文本字段占位符
【发布时间】：2011-11-14 22:29:42
【问题描述】：

如何在 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>

【问题讨论】：

不是一个真正的答案，但 jQuery Mobile 会这样做，所以你可能想看看他们是如何实现它的。
对我来说，当您摆脱 input.placeholder 位时，您的代码就可以工作。将输入中的文本对齐到中心也会对齐占位符。

标签： html css

【解决方案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; 
}

【讨论】：

这适用于大多数输入字段，但不适用于日期类型。你知道如何让它也适用于约会吗？

【解决方案2】：

input{
   text-align:center;
}

就是你所需要的。

Working example 在 FF6 中。此方法似乎不兼容跨浏览器。

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

【讨论】：

我不想将占位符以及输入到字段中的文本居中
是的。这就是这个例子所做的。占位符是字段中的文本。
它在示例中不起作用。在示例中，占位符左对齐。
请注意，如果您使用的是 Bootstrap 或 Semantic UI 等库，则必须添加内联样式，即 <input type="text" placeholder="Search..." style="text-align: right;"> 才能正常工作。或者，如果您使用的是外部文件，请将 important! 添加到您的 CSS 规则中。
看起来你遇到的问题 max_ 只是浏览器兼容性的问题。这在除 Safari 之外的大多数主流浏览器中都可以正常工作。

【解决方案3】：

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。

这样样式就会起作用：

input.placeholder {
    text-align: center;
}

【讨论】：

【解决方案4】：

你可以这样：

    <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>

Working CodePen here

【讨论】：

只有这对我有用。也许在 HTML 中添加的样式具有更高的优先级或覆盖所有其他样式。

【解决方案5】：

您也可以使用这种方式为占位符编写 css

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

【讨论】：

【解决方案6】：

您可以在下面的类中使用 set 并设置为输入文本类
CSS：

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML：

<input type="text" class="place-holder-center">

【讨论】：

【解决方案7】：

你可以这样试试：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

通过使用下面的代码 sn-p，您可以在输入中选择占位符，并且放置在其中的任何代码都只会影响占位符。

input::-webkit-input-placeholder {
      text-align: center
}

【讨论】：

与Accepted Answer相比，这个答案似乎没有什么不同。
这个答案确实暗示了如何更改仅一个特定元素的占位符而不是所有占位符。例如。 .foo::-webkit-input-placeholder { … }.