时间戳

首页 > 解决方案 > 缩小占位符文本后如何使占位符和文本框光标居中？

html - 缩小占位符文本后如何使占位符和文本框光标居中？

问题描述

我有一个输入文本框，里面有占位符文本；现在，我正在缩小占位符文本，以便在文本框聚焦时它仍然可见，但是当我缩小它时，尽管垂直翻译，占位符文本太靠近输入框的顶部。

我知道文本框中的光标仍然居中，但我希望占位符文本和光标都在文本框中居中。有没有办法只用 CSS 来做到这一点？

// 我的输入文本框：

<input
  type="text"
  className={errors.email && errors.email.length !== 0 ? 'bad-input' : ''}
  value={this.state.email}
  onChange={this.update('email')}
  placeholder="Email"
/>

// 我缩小占位符文本的样式：

.login-modal-wrapper form .main-content-wrapper input[type="text"]:focus::placeholder,
.login-modal-wrapper form .main-content-wrapper input[type="password"]:focus::placeholder {
  font-size: 12px;
  transform: translateY(-20px);
  transition: all 0.5s;
}

标签： htmlcss

解决方案

对于水平居中，您应该使用text-align:center.

对于垂直调整，您需要手动设置它们，但有 2 个选项；

  1. 您可以调整文本框的填充；padding-top:10px;或者padding-top:40%;

  2. 调整文本框内文本的行高；line-height:20px;.

推荐阅读