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

问题描述：

我正在为我正在实习的公司提出申请。我已经完成了前端的一部分，并且有一个小问题需要我帮忙。该代码是在如何对齐填充输入字段/框中的文本？

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

你可能会看到，输入字段由于分机而将其占位符带到左边ra（必要）填充我给了。任何人可以在这里建议我如何将占位符（以及文本）与输入字段的左边界对齐吗？

你的意思是说，填充必须是有，但之前的空间不应该是什么？ – Harry

没错。填充是因为我想尽可能地移动友好（和更大的盒子尺寸帮助）。但是我想让文字左对齐或居中对齐，因为当前的设置看起来很奇怪。 –

通过你的陈述 - *左边或中心对齐* - 你能不能将'text-align：center'添加到'input'。这应该解决它。如果你想要左对齐，你可以尝试使用'text-indent： - [padding-left]'，但是我之前看到的是它隐藏了部分文本。 – Harry

答

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

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

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

相关推荐