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

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

Answer 2

input{
   text-align:center;
}

是你所需要的全部.

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

您之前的CSS试图将输入元素的文本居中,该输入元素具有"占位符"类.

Answer 3

您可以在如下所示的类中使用 set 并将其设置为输入文本类
CSS：

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

HTML：

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

Answer 4

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

Answer 5

您可以这样：

    <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

Answer 6

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

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

Answer 7

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

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