CSS Vertical Align Placeholder Text

Question

I'm trying to vertically align the place holder for a text input box.

I've got the ::--webkit and :--moz rules going, and they're working for other stylings, but not vertically aligning...

I've tried vertical-align: middle; in the webkit rules, and under the .input itself. I've also tried line-height: <same as the input box height>

jsfiddle.net/s3vpgxqg/

Can anyone see the simple thing I'm missing??

Thank you!!

Answer 1

One option is change the font formatting placeholder for input (the placeholder inherits the formatting).

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>