0 

.username::placeholder {
  padding-top: 14px;
  text-align: center;
  vertical-align: middle;
  color: $grey-blue;
  overflow: hidden;
}

.username {
  resize: none;
  width: 250px;
  height: 46px;
  text-align: center;
  vertical-align: middle;
  font-size: 16px;
  font-family: "SansSerif", sans-serif;
  display: inline-block;
  border: 2px solid $blue;
}

.submit
{
  vertical-align   : middle;
  background-color : $blue;
  color            : $white;
  border           : 2px solid $blue;
  text-align       : center;
  padding          : 16px 32px;
  text-decoration  : none;
  display          : inline-block;
  font-size        : 16px;
  margin           : 4px 2px;
  cursor           : pointer;
}
<form class="center">
  <textarea minlength="2" maxlength="24" title="Username" placeholder="Username" class="username"></textarea >
<button type="submit" class="submit">Submit</button>
</form>

我想在文本字段中垂直居中一些文本，我能够使占位符文本居中，但不是正在输入的实际文本。

我希望通过伸出援手来完成，是让用户的文本与占位符文本对齐，并在它旁边的“提交”按钮。

如果您运行上面的代码片段，并尝试在字段中输入文本，您就会明白我的意思。

我尝试过的一种解决方案是将其包装在一个 div 中，但没有奏效。

这是我的 HTML： http ://secure.serverbox.net/sharex/201803/2018-03-28_15-07-02.png

这是我的样式： http ://secure.serverbox.net/sharex/201803/2018-03-28_15-08-19.png

问题如下：
使用占位符： http ://secure.serverbox.net/sharex/201803/2018-03-28_15-09-25.png
VS
使用文本： http ://secure.serverbox.net/ sharex/201803/2018-03-28_15-11-52.png

请注意占位符文本的垂直对齐方式与用户输入的不同。

提前致谢！

4

1 回答 1

0

看起来正在输入的实际文本已经居中。也许您在谈论垂直对齐？您将 padding-top 添加到占位符中，为什么 .username 不一样？我建议您删除 .username::placeholder 并仅使用 .username （这次不要忘记添加填充顶部）。我希望它有帮助:)

于 2018-03-28T21:31:10.287 回答