html - 如何在非活动输入字段中保持文本居中？

Question

当我点击远离字段时，我希望文本居中在输入字段中。现在，当我在字段内写东西时，它是从中心开始的——这很好。现在，当我离开场地或去另一个场地时，我想保持它居中。是否可以？谢谢你的帮助。

加分项：输入框的下边框可以向上移动吗？假设 2pxs up 以便它与字段周围的文本完美对齐？

input[type=text] {
  background-color: #fff;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px black dotted;
  width: 100px;
}

input[type=text]:focus {
  outline: none;
  text-align: center;
}

<p>
  Write something in here: <input type="text">. Thanks!
</p>

标签： htmlcssinput

Answer 1

把text-align:center_ input[type=text]_input[type=text]:focus

input[type=text] {
  background-color: #fff;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px black dotted;
  width: 100px;
  text-align: center;
}

input[type=text]:focus {
  outline: none;
  
}

<p>
  Write something in here: <input type="text">. Thanks!
</p>