Выравнивание формы и меток

Question

Обычно я не работаю с формами стилей, но в настоящее время я создаю регистрационную форму, и я пытаюсь получить элементы формы посередине для экрана со всеми выровненными текстовыми полями.

Как это выглядит в настоящее время:

Как я сказал, что я довольно новый для укладки поэтому любой совет, хороший совет.

<form action="" method="POST"> 
 

 
    <label for="FirstName">First name:</label> 
 
    <input type="text" required name="FirstName" /> 
 
    <br> 
 

 
    <label for="SecondName">Second name:</label> 
 
    <input type="test" required name="SecondName" /> 
 
    <br> 
 
    <br> 
 

 
    <label for="Email">Email:</label> 
 
    <input type="text" required name="Email" /> 
 
    <br> 
 

 
    <label for="University">University:</label> 
 
    <input type="text" required name="University" /> 
 
    <br> 
 
    <br> 
 

 
    <label for="Username">Username:</label> 
 
    <input type="text" required name="Username" /> 
 
    <br> 
 

 
    <label for="Password">Password:</label> 
 
    <input type="password" required name="Password" /> 
 
    <br> 
 
    <br> 
 

 
    <input type="submit" name="register" value="register" /> 
 
    <br> 
 
    <br> 
 

 
</form>

Answer 1

Я создал CodePen для вас. Нельзя использовать теги <br> для создания промежутков между элементами, просто используйте поля или прокладки.

http://codepen.io/anon/pen/KaEeWQ

form{ 
    width: 300px; (this fixes the width of the form you can change it to whatever you like) 
} 

label { 
    margin-bottom: 10px; (here you can change the gap between each element) 
} 

Answer 2

Это то, что вы ищете?

label { 
 
    width: 150px; 
 
    text-align:right; 
 
    display: inline-block; 
 
}

<form action="" method="POST"> 
 

 
<label for ="FirstName">First name:</label> 
 
<input type="text" required name="FirstName"/><br> 
 

 
<label for ="SecondName">Second name:</label> 
 
<input type="test"required name="SecondName"/><br><br> 
 

 
<label for ="Email">Email:</label> 
 
<input type="text" required name="Email"/><br> 
 

 
<label for ="University">University:</label> 
 
<input type="text" required name="University"/><br><br> 
 

 
<label for ="Username">Username:</label> 
 
<input type="text" required name="Username"/><br> 
 

 
<label for ="Password">Password:</label> 
 
<input type="password" required name="Password"/><br><br> 
 

 
<input type="submit" name="register" value="register"/><br><br> 
 

 
</form>