Shubham Mehta Shubham Mehta - 6 months ago 10
CSS Question

How to align text in a padded-out input-field/ box?

I'm making an application for the company I'm interning with. I've completed a part of the front end and there was one small problem I needed help with. The code is at

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

Or else you may shoot up the landing page straight up by clicking

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





As you might see, the input fields have their placeholder brought left because of the extra (necessary) padding I gave. Can anybody here suggest me something as to how align the placeholder (and hence the text) with the left border of the input field?

Answer

Based on your comment that either left or center align would be fine, I would suggest going with center align option by using text-align center on the input element. This option would be lot more easier to achieve than left align with padding.

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