时间戳

首页 > 解决方案 > 如何在 Safari 和 Chrome 中居中占位符文本？

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

问题描述

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

演示

我为此使用了这个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

解决方案

input::placeholder{
  text-align:center;
  line-height:50px;
}

推荐阅读