CSS垂直位置揃えプレースホルダテキスト

Question

テキスト入力ボックスのプレースホルダを垂直方向に揃えようとしています。私はWebKitのルールでvertical-align: middle;を試みた

私は行く::--webkitと:--mozルールを持っている、と彼らは他のスタイリングのために働いているが、垂直配向ではない...、と下には.inputそのもの。私はまた、誰もが私が欠けているシンプルなものを見ることができます

jsfiddle.net/s3vpgxqg/

line-height: <same as the input box height>を試してみました？

ありがとうございました！

Answer 1

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>