Espaço reservado para o campo de texto de entrada HTML central

Como posso centralizar o alinhamento do espaço reservado do campo de entrada em um formato html?

Estou usando o seguinte código, mas ele não 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>

Se você deseja alterar apenas o estilo do espaço reservado

::-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{
   text-align:center;
}

é tudo o que você precisa.

Exemplo de trabalho no FF6. Este método não parece ser compatível com vários navegadores.

Seu CSS anterior estava tentando centralizar o texto de um elemento de entrada que tinha uma classe de "espaço reservado".

O elemento de espaço reservado HTML5 pode ser estilizado para os navegadores que aceitam o elemento, mas de maneiras diferentes, como você pode ver aqui: http://davidwalsh.name/html5-placeholder-css .

Mas não acredito que text-alignisso seja interpretado pelos navegadores. Pelo menos no Chrome, esse atributo é ignorado. Mas você sempre pode mudar outras coisas, como color, font-size, font-familyetc. eu sugiro que você repensar seu projeto seja possível remover este comportamento centro.

EDITAR

Se você realmente deseja que este texto seja centralizado, sempre pode usar algum código ou plugin jQuery para simular o comportamento do espaço reservado. Aqui está uma amostra: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Dessa forma, o estilo funcionará:

input.placeholder {
    text-align: center;
}

Você pode fazer assim:

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

Funciona bem para minhas necessidades, você deve verificar a compatibilidade do seu navegador, não tive problemas porque não ligava para compatibilidade com versões 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; 
}

você também pode usar esta maneira de escrever css para espaço reservado

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

Você pode tentar assim:

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

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

Ao usar o snippet de código abaixo, você está selecionando o espaço reservado na sua entrada e qualquer código inserido no local afetará apenas o espaço reservado.

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

Você pode usar o conjunto em uma classe como abaixo e definir a entrada da classe de texto
CSS:

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

HTML:

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