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

153

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

html css

— max_
source

并不是一个真正的答案，但是jQuery Mobile做到了，因此您可能想看看他们是如何实现的。

— 伊万斯（Evanss）2012年

对我来说，当您摆脱一input.placeholder点点的时候，您的代码就会起作用。将输入内的文本对齐到居中也将对齐占位符。

— 杀人剂'17

283

如果只想更改占位符样式

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

5

这对于大多数输入字段都适用，但对于日期类型则无效。您知道如何使日期生效吗？

— Cornelius Parkin

92

input{
   text-align:center;
}

是你所需要的全部。

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

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

— 杰米·迪克森（Jamie Dixon）
source

5

我不要将占位符以及输入字段的文本

— 居中

1

是。这就是本示例的工作。占位符是字段中的文本。

— 杰米·迪克森

2

在该示例中不起作用。在示例中，占位符保持对齐。

— max_ 2011年

请注意，如果您使用的是Bootstrap或Semantic UI之类的库，则必须添加内联样式，即<input type="text" placeholder="Search..." style="text-align: right;">要使其正常工作。important!如果您使用的是外部文件，也可以添加到CSS规则中。

— Behdad

看来您遇到的问题max_仅仅是浏览器兼容性的问题。在Safari之外的大多数主流浏览器中，此功能都可以正常工作。

— 杀人剂'17

7

可以为那些接受该元素的浏览器设置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;
}

— 埃里克·佩特鲁切利（Erick Petrucelli）
source

7

您可以这样：

    <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

— 伊恩·大卫·波西奥卡（Ian David Bocioaca）
source

只有这个对我有用。也许HTML中添加的样式被赋予了更高的优先级或覆盖了所有其他样式。

— Gokul

5

它可以很好地满足我的需求，您应该检查浏览器的兼容性，因为我不关心向后兼容性，所以我没有问题

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

— 丹尼斯
source

3

这个答案不是另一个答案的直接副本吗？

— 安华

3

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

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

— 安吉·贾斯瓦尔（Ankit Jaiswal）
source

2

您可以这样尝试：

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

— 上谷t
source

1

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

— 鲁德雷什·巴特（Rudresh Bhatt）
source

0

通过使用下面的代码段，您可以在输入中选择占位符，并且放置在其中的任何代码将仅影响占位符。

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

— 布兰登·梅
source

与“已接受答案”相比，该答案似乎没有提供任何不同之处。

— 安东·孟肖夫（Annon Menshov）

此答案确实暗示了如何更改仅一个特定元素的占位符，而不是所有占位符。例如.foo::-webkit-input-placeholder { … }。

— 亨里克N

0

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

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

HTML：

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

— 穆罕默德·达里里（Mohammad Daliri）
source