Trung tâm giữ chỗ trường nhập văn bản HTML

Làm cách nào tôi có thể căn giữa căn chỉnh chỗ dành cho trường đầu vào ở dạng html?

Tôi đang sử dụng đoạn mã sau, nhưng nó không hoạt động:

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>

Nếu bạn chỉ muốn thay đổi kiểu giữ chỗ

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

là tất cả những gì bạn cần.

Ví dụ làm việc trong FF6. Phương pháp này dường như không tương thích với nhiều trình duyệt.

CSS trước đó của bạn đã cố gắng căn giữa văn bản của một yếu tố đầu vào có một lớp "giữ chỗ".

Phần tử giữ chỗ HTML5 có thể được tạo kiểu cho những trình duyệt chấp nhận phần tử đó, nhưng theo những cách khác nhau, như bạn có thể thấy ở đây: http://davidwalsh.name/html5-placeholder-css .

Nhưng tôi không tin rằng text-alignsẽ được các trình duyệt giải thích. Ít nhất là trên Chrome, thuộc tính này bị bỏ qua. Nhưng bạn luôn có thể thay đổi những thứ khác, như color, font-size, font-familyvv Tôi đề nghị bạn suy nghĩ lại thiết kế của bạn cho dù có thể để loại bỏ hành vi trung tâm này.

BIÊN TẬP

Nếu bạn thực sự muốn văn bản này tập trung, bạn luôn có thể sử dụng một số mã hoặc plugin jQuery để mô phỏng hành vi giữ chỗ. Đây là một mẫu của nó: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Bằng cách này, phong cách sẽ hoạt động:

input.placeholder {
    text-align: center;
}

Bạn có thể làm như thế này:

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

CodePen làm việc tại đây

Nó hoạt động tốt cho nhu cầu của tôi, bạn nên kiểm tra tính tương thích cho trình duyệt của mình, tôi không gặp vấn đề gì vì tôi không quan tâm đến khả năng tương thích ngược

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

bạn cũng có thể sử dụng cách này để viết css cho trình giữ chỗ

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

Bạn có thể thử như thế này:

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

Bằng cách sử dụng đoạn mã bên dưới, bạn đang chọn trình giữ chỗ bên trong đầu vào của mình và bất kỳ mã nào được đặt bên trong sẽ chỉ ảnh hưởng đến trình giữ chỗ.

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

Bạn có thể sử dụng tập hợp trong một lớp như bên dưới và đặt thành
CSS lớp văn bản đầu vào :

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

HTML:

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