ตัวยึดฟิลด์ข้อความ HTML ที่กึ่งกลางศูนย์

ฉันจะจัดตำแหน่งตัวจัดตำแหน่งของตัวป้อนฟิลด์ในรูปแบบ html ได้อย่างไร

ฉันใช้รหัสต่อไปนี้ แต่มันไม่ทำงาน:

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>

หากคุณต้องการเปลี่ยนเฉพาะรูปแบบตัวยึดตำแหน่ง

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

คือทั้งหมดที่คุณต้องการ

ตัวอย่างการทำงานใน FF6 วิธีนี้ดูเหมือนจะใช้งานข้ามเบราว์เซอร์ไม่ได้

CSS ก่อนหน้าของคุณพยายามจัดกึ่งกลางข้อความขององค์ประกอบอินพุตซึ่งมีคลาสเป็น "ตัวยึด"

องค์ประกอบ HTML5 สามารถยึดสไตล์เบราว์เซอร์ที่ยอมรับองค์ประกอบ แต่ในรูปแบบที่แตกต่างกันตามที่คุณสามารถดูที่นี่: http://davidwalsh.name/html5-placeholder-css

แต่ฉันไม่เชื่อว่าtext-alignจะถูกตีความโดยเบราว์เซอร์ อย่างน้อยใน Chrome แอตทริบิวต์นี้จะถูกละเว้น แต่คุณสามารถเปลี่ยนสิ่งอื่น ๆ เช่นcolor,font-size , font-familyฯลฯ ผมขอแนะนำให้คุณทบทวนการออกแบบของคุณไม่ว่าจะเป็นไปได้ที่จะเอาพฤติกรรมของศูนย์นี้

แก้ไข

หากคุณต้องการให้ข้อความนี้อยู่กึ่งกลางจริงๆคุณสามารถใช้ jQuery code หรือปลั๊กอินเพื่อจำลองพฤติกรรมของตัวยึดตำแหน่ง นี่คือตัวอย่างของมัน: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

วิธีนี้จะใช้สไตล์:

input.placeholder {
    text-align: center;
}

คุณสามารถทำสิ่งนี้:

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

รหัสการทำงานก่อนหน้านี้

มันทำงานได้ดีสำหรับความต้องการของฉันคุณควรตรวจสอบความเข้ากันได้สำหรับเบราว์เซอร์ของคุณฉันไม่มีปัญหาเพราะฉันไม่สนใจความเข้ากันได้แบบย้อนหลัง

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

คุณสามารถใช้วิธีนี้เพื่อเขียน CSS สำหรับตัวยึดตำแหน่ง

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

คุณสามารถลองสิ่งนี้:

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

ด้วยการใช้ข้อมูลโค้ดด้านล่างนี้คุณกำลังเลือกตัวแทนที่อยู่ภายในข้อมูลที่คุณป้อนและรหัสใด ๆ ที่วางไว้ภายในจะมีผลกับตัวยึดตำแหน่งเท่านั้น

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

คุณสามารถใช้ set ในคลาสอย่างเช่นด้านล่างและตั้งเป็น
CSS text class input :

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

HTML:

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