Question

如何将输入字段占位符对齐以html格式居中？

我使用以下代码，但它不起作用：

CSS - ＆gt;

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 - ＆gt;

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

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

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

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

Answer 4

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

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

Working CodePen here

Answer 6

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

编写css

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

Answer 7

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

Answer 8

您可以尝试这样：

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

Answer 9

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

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

HTML：

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

Answer 10

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

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

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

10 个答案: