가운데 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 코드 또는 플러그인을 사용하여 자리 표시 자 동작을 시뮬레이션 할 수 있습니다. 샘플은 다음과 같습니다. 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 를 입력하도록 설정할 수 있습니다 .

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

HTML :

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