如何在Safari和Chrome中居中占位符文本？

How to center placeholder text in both Safari and Chrome?

提问人：jiggy1965 提问时间：5/16/2019 更新时间：5/16/2019 访问量：2516

问：

我有一个输入字段，在其中我为占位符文本提供了比输入文本本身更小的字体。

演示

我为此使用了这个 css：

input {
  width:200px;
  height:50px;
  font-size: 30px;
  text-align: center;
  background-color: yellow;
  text-transform: uppercase;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 12px;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 12px;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 12px;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 12px;
}

然而，在 Safari 中发生的情况是，占位符文本更多地位于输入字段的顶部，而在 Chrome 中，占位符文本更多地位于底部。在 Safari 和 Chrome 中，输入文本本身都是垂直居中的。如何使较小的占位符文本在 Safari 和 Chrome 中也垂直居中？

CSS的

评论

1赞 GifCo 5/16/2019
您可以尝试使用填充而不是高度。不过，占位符样式非常有限。如果您想要精细控制，我会使用伪元素而不是本机占位符文本，并将其绝对放置在您想要的位置。
0赞 jiggy1965 5/16/2019
@SamratV我希望键入的文本具有 30px 的大字体大小，而占位符文本的字体大小较小，为 12px
1赞 jiggy1965 5/16/2019
@GifCo填充无济于事，因为我不能对 Safari 使用与 Chrome 不同的填充。他们都使用相同的 webkit css
0赞 GifCo 5/16/2019
为什么要使用不同的填充物？你说你想让它在两个上看起来一样？
1赞 jiggy1965 5/16/2019
@GifCo 这就是我的观点。在 Safari 中，占位符文本几乎居中，但在 Chrome 中，占位符文本较低。我可以在底部添加填充以使其上升，但是在Safari中也会使它如此增加。然后它将在 Chrome 中居中，但这次在 Safari 中太高了。

答：

1赞 Orçun Tuna 5/16/2019 #1 
input::placeholder{
  text-align:center;
  line-height:50px;
}

评论

0赞 jiggy1965 5/16/2019
这是水平居中，而不是垂直居中
0赞 Orçun Tuna 5/16/2019
您可以将 line-height 用于垂直

上一个：如何在输入文本字段中移动文本？

下一个：如何在不造成段落间隙的情况下正确催眠？