css - 如何在文本区域内将文本居中？

Question

.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
对比
带文字: http://secure.serverbox.net/sharex/201803/2018-03-28_15-11-52.png

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

提前致谢!

Answer 1

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