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

如何在 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>
347050 次浏览
小开 
input{
text-align:center;
}

就是你所需要的。

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

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

小开

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;
}
小开
最佳答案

如果只想更改占位符样式，请选择 ::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;
}
小开

你可以这样做:

    <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

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

你可以这样试试:

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

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

input::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;
}
小开

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

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

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

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

HTML:

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

提交答案