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

Повторите Ctrl + Высокий звук + Del Дважды!

5
задан gevorg 13 June 2016 в 19:31
поделиться

3 ответа

form {
  text-align: center;
}

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

5
ответ дан 13 December 2019 в 05:36
поделиться

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

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

6
ответ дан 13 December 2019 в 05:36
поделиться

Обычное «центрирование», используемое для меток и входных данных формы, на самом деле представляет собой 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>
1
ответ дан 13 December 2019 в 05:36
поделиться