Центр-оправдывая элементы в форме

Question

Я пытаюсь получить мою форму, а именно поле и текстовые элементы в форме, чтобы быть центром оправданной, похожее на это:

Form example

Как бы я продолжайте это делать? Я пытался делать

table > tbody { 
    text-align: justify; 
    text-align: center; 
    background-color: #e8e8e8; 

} 

Который только заканчивается центрирования все (за исключением FIELDSET, как ни странно) и не делает ничего обосновывать. Любая помощь будет оценена по достоинству.

My Code

Answer 1

Хотя это, возможно, разумный случай для таблицы, вы могли бы устранить всю дополнительную разметку, таблица вывести с помощью элемента этикетки набора для display:block, какой типа действует как столбец таблицы. Я часто выкладываю свои формы следующим образом. Это имеет дополнительное преимущество в том, что при малых экранах вы можете иметь метку выше ввода путем отведения поплавка.

Если вы хотите, чтобы входные элементы с правой стороны (текст, электронная почта, текстовая область и т. Д.) Выглядели одинаково, вам нужно будет стилизовать их с определенной шириной, paddings, font-size и т. Д., Чтобы переопределить стили браузера по умолчанию. В противном случае все они будут иметь разную ширину по умолчанию.

label, input[type="text"] { 
 
    display: block; 
 
    float: left; 
 
    } 
 
label { 
 
    width: 30%; 
 
    text-align: right; 
 
    margin: 8px; 
 
    clear: left; 
 
    } 
 

 
input[type="text"] { 
 
    margin: 8px 0; 
 
    }

<form> 
 
<label for="name">Name</label> 
 
<input type="text" name="name"> 
 

 
<label for="phone">Phone</label> 
 
<input type="text" name="phone" placeholder="555-5555"> 
 

 
<label for="email">Email</label> 
 
<input type="text" name="email"> 
 
... 
 
    </form>