html - 如何在填充的输入字段/框中对齐文本？

Question

我正在为我实习的公司提出申请。我已经完成了前端的一部分，但有一个小问题需要帮助。代码在

https://github.com/ZeusEm/AirIndia-WebAlert

否则您可以通过点击

直接将着陆页弹出

http://zeusem.github.io/AirIndia-WebAlert/

input {
  margin: 1em;
  display: inline-block;
  padding: 2em 19%;
  max-width: 30vmin;
}

<input class="data glowing-border" type="text" name="username" required="" autofocus="" placeholder="Username">
<input class="data glowing-border" type="password" name="password" required="" placeholder="Password">

如您所见，由于我提供了额外的(必要的)填充，输入字段的占位符被移到左侧。这里有人可以建议我如何将占位符(以及文本)与输入字段的左边框对齐吗？

Answer 1

基于您的 comment that either left or center align would be fine ，我建议通过在 input 元素上使用 text-align center 来使用居中对齐选项。与使用填充左对齐相比，此选项更容易实现。

input {
  margin: 1em;
  display: inline-block;
  padding: 2em 19%;
  max-width: 30vmin;
  text-align: center;
}

<input class="data glowing-border" type="text" name="username" required="" autofocus="" placeholder="Username">
<input class="data glowing-border" type="password" name="password" required="" placeholder="Password">