Pusat HTML Input Field Teks Placeholder

Bagaimana saya dapat centre input field's placeholder's keselarasan dalam form html?

Saya menggunakan kode berikut, tapi itu doesn't bekerja:

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>
max_
Pertanyaan edit 11 September 2011 в 9:46
Pemrograman
html css
11 September 2011 в 9:41
3 tayangan
Mengomentari pertanyaan (3)
Larutan

Jika anda hanya ingin mengubah gaya placeholder

::-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; 
}
Volker E.
Jawaban edit 14 Oktober 2014 в 4:56
Komentar (1)
 
input{
   text-align:center;
}

adalah semua yang anda butuhkan.

[Contoh kerja][1] di FF6. Metode ini doesn't tampaknya lintas-browser yang kompatibel.

Sebelumnya CSS berusaha untuk pusat teks dari elemen input yang memiliki kelas "tempat".

Jamie Dixon
Jawaban edit 11 September 2011 в 9:53
Komentar (9)

Anda dapat membuat seperti ini:



    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <input type="submit" value="submit" />

Kerja CodePen here

Komentar (1)

HTML5 placeholder elemen dapat ditata bagi browser yang menerima unsur, tetapi dalam cara yang berbeda, seperti yang anda bisa lihat di sini: http://davidwalsh.name/html5-placeholder-css.

Tapi aku don't percaya bahwa text-align akan ditafsirkan oleh browser. Setidaknya pada Chrome, atribut ini diabaikan. Tapi anda selalu dapat mengubah hal-hal lain, seperti warna, font-size, font-family dll. Saya sarankan anda memikirkan kembali desain anda apakah mungkin untuk menghapus pusat ini perilaku.

EDIT

Jika anda benar-benar ingin teks ini berpusat, anda dapat selalu menggunakan beberapa kode jQuery atau plugin untuk mensimulasikan perilaku placeholder. Berikut ini adalah contoh dari hal ini: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

Cara ini gaya yang akan bekerja:

input.placeholder {
    text-align: center;
}
Erick Petrucelli
Jawaban edit 11 September 2011 в 9:53
Komentar (0)

Itu bekerja dengan baik untuk kebutuhan saya, anda harus memeriksa kompatibilitas untuk browser anda, Aku't memiliki masalah karena saya didn't peduli untuk kompatibilitas

.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; 
}
Komentar (1)

anda juga dapat menggunakan cara ini untuk menulis css untuk placeholder

input::placeholder{
   text-align: center;
}
Komentar (0)

Anda dapat mencoba seperti ini :

input[placeholder] {
   text-align: center;
}
Komentar (0)
::-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;
}
Komentar (0)

Dengan menggunakan potongan kode di bawah ini, anda akan memilih pengganti dalam masukan anda, dan setiap kode yang ditempatkan di dalam akan mempengaruhi placeholder. 

input::-webkit-input-placeholder {
      text-align: center
}
Komentar (1)