HTML Girişi Metin Alanı Yer Tutucusunu Ortala

Giriş alanının yer tutucusunun hizalamasını html biçiminde nasıl ortalayabilirim?

Aşağıdaki kodu kullanıyorum, ama çalışmıyor:

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>

Yalnızca yer tutucu stilini değiştirmek istiyorsanız

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

tüm ihtiyacın olan.

FF6'da çalışma örneği . Bu yöntem tarayıcılar arası uyumlu görünmüyor.

Önceki CSS'niz, "yer tutucu" sınıfına sahip bir giriş öğesinin metnini ortalamaya çalışıyordu.

HTML5 yer tutucu öğesi, öğeyi kabul eden tarayıcılar için, ancak burada görebileceğiniz gibi farklı şekillerde şekillendirilebilir: http://davidwalsh.name/html5-placeholder-css .

Ama text-alignbunun tarayıcılar tarafından yorumlanacağına inanmıyorum . En azından Chrome'da bu özellik yok sayılır. Ama her zaman, gibi diğer şeyleri değiştirebilir color, font-size, font-familyvb ben bu merkez davranışı kaldırmak mümkün olmadığını tasarımınızı yeniden düşünmek öneririz.

DÜZENLE

Bu metnin gerçekten ortalanmasını istiyorsanız, yer tutucu davranışını simüle etmek için her zaman bazı jQuery kodu veya eklentisi kullanabilirsiniz. İşte bir örnek: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Bu şekilde stil çalışacaktır:

input.placeholder {
    text-align: center;
}

Bu şekilde yapabilirsiniz:

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

Çalışma Kodu

İhtiyaçlarım için iyi çalışıyor, tarayıcınızın uyumluluğunu kontrol etmelisiniz, sorunlarım yoktu çünkü geriye dönük uyumluluğu umursamadım

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

yer tutucu için css yazmak için de bu yolu kullanabilirsiniz

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

Bu şekilde deneyebilirsiniz:

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

Aşağıdaki kod snippet'ini kullanarak, girdinizin içindeki yer tutucuyu seçersiniz ve içine yerleştirilen herhangi bir kod yalnızca yer tutucuyu etkiler.

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

Set'i aşağıdaki gibi bir sınıfta kullanabilir ve
CSS metin sınıfı girişine ayarlayabilirsiniz :

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

HTML:

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