Question

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

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

否则您可以点击

直接拍摄目标网页

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

正如您可能看到的那样，由于我提供的额外（必要）填充，输入字段将其占位符向左移动。这里有人可以建议我如何将占位符（以及文本）与输入字段的左边界对齐吗？

Answer 1

根据您的comment that either left or center align would be fine，我建议您使用text-align元素上的input中心选择居中对齐选项。这个选项比左边对齐填充更容易实现。

＆＃13;

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

＆＃13;

<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">

＆＃13;

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

1 个答案: