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>
 130
Author: max_, 2011-09-12

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; 
}
 242
Author: prarthana.m,
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".

 78
Author: Jamie Dixon,
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;
}
 7
Author: Erick Petrucelli,
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; 
}
 7
Author: Denis,
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>

Código de trabajo aquí

 4
Author: Ian David Bocioaca,
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;
}
 0
Author: Rudresh Bhatt,
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;
}
 0
Author: Rani Utami,
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;
}
 0
Author: 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-05-04 13:15:25

Input:: marcador de posición{ alineación de texto: centrar; }

Funcionó correctamente, @Ankit Jaiswal

 0
Author: Wɑɳɗɛʀ Souzɑ,
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