Центрирование всех элементов формы HTML с использованием CSS

Question

Как вы центрируете все поля формы и поля ввода с помощью CSS?

Как бы вы сделали это для формы с текстом метки (блоком) в верхней части поля ввода?

#fieldset label {
    display: block;    
}

#fieldset input {
    font-size: 0.8em;
    height: 1.2em;
    width: 15em;
}

Answer 1

Как сказали Болдевин и Бен, выравнивание текста будет центрировать встроенные элементы (например, промежутки). Чтобы отцентрировать элементы блока (например, элементы div, формы и абзацы), присвойте ему ширину и установите для полей margin-right и margin-left значение auto.

Важно понимать разницу между блочными и встроенными элементами .

Answer 2

form {
  text-align: center;
}

Это зависит как от вашего HTML, так и от вашего текущего CSS. Вышесказанное является отправной точкой.

Answer 3

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

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

<style type="text/css">
  .foolabel{width:10em;text-align:right;display:inline-block;margin-right:1em;}
  .formlist{list-style:none}
</style>
<ul class="formlist">
  <li><label class="foolabel">Name:</label><input type="text" /></li>
  <li><label class="foolabel">Quest:</label><input type="text" /></li>
  <li><label class="foolabel">Favorite Color:</label><input type="text" /></li>
</ul>