CSS垂直对齐占位文本

Question

我正在尝试垂直对齐文本输入框的占位符。

我已经编写了::--webkit和::--moz规则，它们可以用于其他样式，但无法垂直对齐...

我在webkit规则中和.input本身下尝试了vertical-align: middle;。我还尝试了line-height: <same as the input box height>。

jsfiddle.net/s3vpgxqg/

有人能看出我错过的简单事情吗？

谢谢！！

- Runny Yolk

---

奇怪！我也在使用Chrome... - Runny Yolk

如果您将其扩展到更大的高度，占位符会出现在哪里？ - StardustGogeta

有了更大的高度，它出现在中间，但绝对不是在60像素处，而且在更大的高度上我也不能使用vertical-align: top;（虽然我不想要这个）：http://jsfiddle.net/dfuobnnn/ 在这个示例中，文本是否垂直对齐到顶部？ - Runny Yolk

不，它没有起作用。我想我弄错了；占位符只是看起来对齐了。我会尝试找到解决方案。 - StardustGogeta

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>

- Angelo Lucas

---

当您运行代码片段时，占位符未垂直对齐。 - achref

这是因为顶部和底部间距取决于字体。只需检查填充的顶部和底部即可。 - Angelo Lucas

重点是占位符字体大小与输入字体大小不同。 - Liangjun