将输入占位符与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

这感觉就像是一个愚蠢的解决方案＆＃34;，但也许你可以用transform:scale(0.45)代替font-size: 9px;。它似乎只支持font-size ::-webkit-input-placeholder中的任何位置{/ 1}}。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：左对齐

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

最好的解决方案可能是简单地将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 3

试试这个：

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

Answer 4

由于文本没有垂直对齐的概念，否则你可以通过伪装来填充它。

   .bottom-input {     
        width: 145px;
        padding: 15px 0 0 0;
        }

     .top-input {     
         width: 145px;
         padding: 0 0 15px 0;
 }

以下是相同的链接 http://jsfiddle.net/ajaygandhi06/u9qhgfky/1/