가운데 HTML 입력 텍스트 필드 자리 표시 자

Question

입력란의 자리 표시 자의 맞춤을 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> 

Answer 1

당신이, 당신이 당신의 브라우저 호환성을 확인해야합니다 그것은 내 요구에 잘 작동

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

Answer 2

input{ 
    text-align:center; 
} 

것은 당신이 필요로하는 모두이다.

Working example (FF6) 이 방법은 브라우저 간 호환이되지 않는 것 같습니다.

이전 CSS에서 "자리 표시 자"클래스가있는 입력 요소의 텍스트를 가운데에 놓으려고했습니다.

Answer 3

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

Answer 4

에만 자리 표시 스타일을 변경하려면, 나는 이전 버전과의 호환성을 걱정하지 않았기 때문에 문제가 없었습니다.

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

Answer 5

당신은 다음과 같이 할 수 있습니다 :

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

Working CodePen here

Answer 6

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

Answer 7

당신은 다음과 같이 시도 할 수 있습니다 :

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