使用 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

最好的解决方案可能是简单地将translate3d 转换添加到占位符 CSS 规则中，如下所示：

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' />

Answer 2

这感觉像是一个愚蠢的“解决方案”，但也许你可以用transform:scale(0.45) 代替font-size: 9px;。它似乎在支持::-webkit-input-placeholder 中的font-size 的任何地方都可以工作。

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

input::-webkit-input-placeholder {
  text-transform: uppercase;
  color: #AAA;
  transform: scale(0.45);
}

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

编辑：左对齐

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

input::-webkit-input-placeholder {
  text-transform: uppercase;
  color: #AAA;
  transform: scale(0.45);
  transform-origin: 0% 50%;
}

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