중심 HTML 입력 텍스트 필드 자리 표시자

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

자리 표시자 스타일만 변경하려면 유사 요소를 선택합니다.

::placeholder {
   text-align: center; 
}

/* or, for legacy browsers */

::-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에서 "placeholder" 클래스가 있는 입력 요소의 텍스트를 가운데로 맞추려고 했습니다.

당신은 또한 이 방법을 사용하여 자리 표시자를 위한 CSS를 작성할 수 있습니다.

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

/* or, for legacy browsers */

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

아래와 같은 클래스에서 set을 사용할 수 있고 입력 텍스트 클래스로 set을 설정할 수 있습니다.
CSS:

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

HTML:

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

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>

여기서 작동 코드펜

다음과 같이 시도해 볼 수 있습니다.

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::placeholder{
position:relative !important;
top:50% !important;
transform:translateY(-50%) !important; 
}

아래 코드 조각을 사용하면 입력 안에 있는 자리 표시자를 선택하는 것이며, 안에 있는 코드는 자리 표시자에만 영향을 미칩니다.

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

언급URL : https://stackoverflow.com/questions/7381446/center-html-input-text-field-placeholder