Question

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

我有::--webkit和:--moz规则，他们正在为其他设计工作，但没有垂直对齐......

我在webkit规则中尝试了vertical-align: middle;，并在.input下进行了尝试。我也试过line-height: <same as the input box height>

jsfiddle.net/s3vpgxqg/

任何人都能看到我遗漏的简单事物吗？

谢谢！

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>

CSS垂直对齐占位符文本

1 个答案: