html & CSS - align inputs

Question

I have the following HTML code:

First Name:<input type="text"  placeholder="First name" name="first_name" required> <br>
Last Name:<input type="text" name="last_name"  placeholder="Last Name" required> <br>
Account Number:<input type="text" name="number"  placeholder="account number" onkeypress="return justNumber(event)" required> <br>
Security Number:<input type="text" name="security_number"  placeholder="security number" onkeypress="return justNumber(event)" required>

I tried to line up using text-align:center; and it didn’t work - see photo pf here: http://imgur.com/a/Dbzov

Answer 1

Possible solution:

.form-container span.input-label{
  display: inline-block;
  width: 120px; /* width a ajustar */
  text-align: right;
  padding-right: 10px;
}

<div class="form-container">
  <span class="input-label">First Name:</span><input type="text"  placeholder="First name" name="first_name" required> <br>
  <span class="input-label">Last Name:</span><input type="text" name="last_name"  placeholder="Last Name" required> <br>
  <span class="input-label">Account Number:</span><input type="text" name="number"  placeholder="account number" onkeypress="return justNumber(event)" required> <br>
  <span class="input-label">Security Number:</span><input type="text" name="security_number"  placeholder="security number" onkeypress="return justNumber(event)" required>
</div>