Marcador de Posición del Campo de Texto de Entrada HTML Central
¿Cómo puedo centrar la alineación del marcador de posición del campo de entrada en un formulario html?
Estoy usando el siguiente código, pero no funciona:
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="[email protected]" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
9 answers
Si desea cambiar solo el estilo del marcador de posición
::-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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-14 16:56:28
input{
text-align:center;
}
Es todo lo que necesitas.
Ejemplo de trabajo en FF6. Este método no parece ser compatible entre navegadores.
Su CSS anterior intentaba centrar el texto de un elemento de entrada que tenía una clase de "marcador de posición".
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-11 21:53:50
El elemento de marcador de posición HTML5 se puede diseñar para aquellos navegadores que aceptan el elemento, pero de diferentes maneras, como puede ver aquí: http://davidwalsh.name/html5-placeholder-css .
Pero no creo que text-align
será interpretado por los navegadores. Al menos en Chrome, este atributo se ignora. Pero siempre puedes cambiar otras cosas, como color
, font-size
, font-family
etc. Le sugiero que reconsidere su diseño si es posible eliminar este centro comportamiento.
EDITAR
Si realmente desea que este texto esté centrado, siempre puede usar algún código o complemento de jQuery para simular el comportamiento del marcador de posición. He aquí una muestra de ello: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .
De esta manera el estilo funcionará:
input.placeholder {
text-align: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-11 21:53:35
Funciona bien para mis necesidades, debe verificar la compatibilidad de su navegador, No tuve problemas porque no me importaba la compatibilidad con versiones anteriores
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-03 13:37:53
Puedes hacer así:
<center>
<form action="" method="POST">
<input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
<input type="submit" value="submit" />
</form>
</center>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-18 19:33:11
::-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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-16 11:38:18
Puedes probar así:
input[placeholder] {
text-align: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-15 13:45:18
También puede usar esta forma para escribir css para el marcador de posición
input::placeholder{
text-align: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-04 13:15:25
Input:: marcador de posición{ alineación de texto: centrar; }
Funcionó correctamente, @Ankit Jaiswal
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-04 02:51:24