Question

＆＃13;

.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;
}

＆＃13;

<form class="center">
  <textarea minlength="2" maxlength="24" title="Username" placeholder="Username" class="username"></textarea >
<button type="submit" class="submit">Submit</button>
</form>

＆＃13;

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

我希望通过伸出手来实现的目的是让用户的文本与占位符文本保持一致，然后提交＆＃34;提交＆＃34;旁边的按钮。

如果您运行上面的代码段，并尝试将字段放在字段中，您就会明白我的意思。

我尝试过的一个解决方案是将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

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

提前致谢！

Answer 1

看起来正在输入的实际文本已经居中。也许你在谈论垂直对齐？你为占位符添加了padding-top，为什么不是.username的相同的东西？我建议你删除.username :: placeholder，只能使用.username（这次不要忘记添加填充顶部）。我希望它有用:)

如何在文本区域中居文本？

1 个答案: