CSS 세로 맞춤 자리 표시 자 텍스트

Question

텍스트 입력란의 자리 표시자를 세로로 정렬하려고합니다. 나는 웹킷 규칙에 vertical-align: middle;을 시도했습니다

내가가는 ::--webkit 및 :--moz 규칙을 가지고, 그들은 다른 stylings가 근무하고 있지만 수직으로 정렬되지 ..., 이하는 .input 자체 . 나는 또한 누군가가 내가 부족 간단한 일을 볼 수

jsfiddle.net/s3vpgxqg/

line-height: <same as the input box height>을 시도했다 ??

감사합니다.

Answer 1

한 가지 옵션은 입력에 대한 글꼴 서식 지정 자리 표시자를 변경하는 것입니다 (자리 표시자는 형식을 상속 함).

https://jsfiddle.net/rwh6hkc6/

html, body { 
 
    margin: 0; 
 
} 
 

 
.email.input { 
 
    text-indent: 40px; 
 
    font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    width: 400px; 
 
    border: none; 
 
    background-color: #FFCF6B; 
 
    font-size: 1.8em; 
 
    font-weight: 100; 
 
    padding: 10px 0; 
 
} 
 

 
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
 
    color: #B1B1B1; 
 
} 
 

 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
    color: #B1B1B1; 
 
    opacity: 1; 
 
} 
 

 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
    color: #B1B1B1; 
 
    opacity: 1; 
 
} 
 

 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
 
    color: #B1B1B1; 
 
}

<div class="centered"> 
 
    <div class="input"> 
 
    <input type="text" class="email input" name="email" placeholder="enter your email"> 
 
    </div> 
 
</div>