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/

Answer 1

您忘了将此css添加到input元素：

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

这是小提琴：fiddle link

Answer 2

我相信，当您设置min-height: 45px时，您应该在line-height: 45px中设置input[type=text]。

如果您改变placeholder，请查看font-size的内容，占位符将保持垂直居中。

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

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;
}

fiddle here

输入占位符垂直对齐

2 个答案: