html - 垂直对齐文本输入(动态高度)

Question

我创建了一个动态高度输入，如下所示，它会在浏览器调整大小时缩放。我想要实现的第二步是将输入文本垂直居中。我使用 vertical-align: middle 但似乎没有任何变化。

我该怎么做才能垂直对齐输入文本

input{
  background: lightgray;
  vertical-align: middle;
    width: 100%;
    height: 30%;
    padding-top: 30%;
}

<input type="text">

Answer 1

由于您的输入有一个 padding-top: 30%;你可以说padding: 15% 0;相反，您的文本将在您的 <input> 中动态居中.

input{
  background: lightgray;
  width: 100%;
  padding: 15% 0;
}

<input type="text">