html - 使用 CSS 垂直对齐输入占位符(或设置行高)

Question

是否可以独立于父输入垂直对齐占位符？似乎没有办法让下面代码中的占位符出现在输入字段的垂直中心。我已经尝试了所有我能想到或在网上找到的 css 属性和解决方法，但输入和占位符上的不同字体大小似乎至少在 webkit 浏览器中是不可能的。

编辑: 左边是问题，右边是期望的外观:

input {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  line-height: 44px;
}

input::-webkit-input-placeholder {
  font-size: 9px;
  text-transform: uppercase;
  color: #AAA;
}

<input type='text' placeholder='enter some text' />

Answer 1

最好的解决方案可能是简单地向占位符 CSS 规则添加一个 translate3d 转换，如下所示:

input {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  line-height: 44px;
}

input::-webkit-input-placeholder {
  font-size: 9px;
  text-transform: uppercase;
  color: #AAA;
  transform:translate3d(0,-4px,0)
}

<input type='text' placeholder='enter some text' />