[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>
답변
자리 표시 자 스타일 만 변경하려는 경우
::-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;
}