输入框的占位符垂直对齐

Question

如何正确地在输入框中垂直居中占位符？

input[type='text']{
  background-color: rgba(255,255,255,.4);
  border:3px solid rgba(0,0,0,.5);
  min-height: 45px;
  border-radius: 6px;
  color:#fff;
}
input[type='text']::-webkit-input-placeholder {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 30px;
  text-transform: uppercase;
  vertical-align: middle;
}

以下是代码https://jsfiddle.net/u6qfwg3w/

- Razvan Cuceu

---

看起来居中了，你是指水平方向吗？ - Ivan

@Ivan 不是很确定。可能是因为我使用的是Chrome浏览器？https://s10.postimg.org/416p2ph2x/center.jpg - Razvan Cuceu

Answer 1

您忘记在 input 元素中添加以下 css：

input[type='text']{
 font-size: 30px;
 color: rgba(255, 255, 255, 0.4);
 line-height: 30px;
}

这是fiddle链接：fiddle link。

- Teuta Koraqi

---

谢谢，你的回答很有用，但是如果我不想让输入文本的字体大小为30像素怎么办？如果没有解决方案，我会使用你的答案。 - Razvan Cuceu

我将把这个答案标记为解决方案，因为我会坚持使用它。但是如果有人对未来遇到此问题的同行有答案，可以在这里发布。 - Razvan Cuceu

@RazvanCuceu，也许你可以将位置应用到占位符上，或许会起作用。试试看！ - Teuta Koraqi

哈哈，那真是个绝妙的主意。这是我没有想到的。再次感谢。 - Razvan Cuceu

@RazvanCuceu，不客气！我以前从未应用过这个。无论如何，很高兴能帮助你，伙计！祝一切顺利！ :) - Teuta Koraqi

Answer 2

我认为，既然您已经设置了min-height: 45px，那么在input[type=text]中也应该将line-height: 45px设置为45像素。

请注意，如果您改变font-size，则placeholder将保持垂直居中。

请告诉我您的反馈。谢谢！

input[type='text']{
  background-color: rgba(255,255,255,.4);
  border:3px solid rgba(0,0,0,.5);
  min-height: 45px;
  line-height: 45px;
  border-radius: 6px;
  color:#fff;
}
input[type='text']::-webkit-input-placeholder {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  vertical-align: middle;
}

在这里编辑

- kukkuz

---

很抱歉，但是这个小提琴不起作用（垂直居中不正确）。可能是因为这是一个旧帖子，但如果你敢展示如何使用 vertical-align，我非常愿意倾听。 - Elvynia