Как разместить форму по центру html

Как разместить форму по центру страницы

После того, как вы выполнили все настройки формы, вам необходимо встроить код на ваш сайт. Чтобы получить встраиваемый код, в личном кабинете в необходимой форме кликните на иконку «Код для вставки»:

Или, если вы находитесь в настройках формы, то выберите пункт «Получить код»:

На этой странице вы найдете «Код для вставки на сайт. JavaScript». Именно этот способ вставки веб-формы на сайт мы рекомендуем нашим пользователям.

Если разместить такой код на странице, то блок с формой займет все свободное пространство, а форма будет выводится слева на странице. Чтобы выровнять форму по центру страницы мы предусмотрели специальный параметр в коде формы — center.

По умолчанию, значение равно 0 — форма выводится слева. Чтобы форма располагалась по центру, измените значение «center» на 1:

 (function (d, w, c) < (w[c] = w[c] || []).push(< formId:, host:"formdesigner.ru", formHeight:0, el: "form__1", center: 1 >); var s = d.createElement("script"), g = "getElementsByTagName"; s.type = "text/javascript"; s.charset="UTF-8"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.ru/js/iform.js"; var h=d[g]("head")[0] || d[g]("body")[0]; h.appendChild(s); >)(document, window, "fdforms"); 

Выравнивание формы по центру на css

Добрый день, такая проблема, сделал форму входа. По горизонтали по центру выровнял с помощью margin: 0 auto; . Но по вертикали не выровнять, как сделать по центру (вертикали)?

Отслеживать
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
задан 5 мар 2016 в 14:46
169 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

.modal

Отслеживать
ответ дан 6 мар 2016 в 19:26
27.5k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

top: calc(50% - высота_блока/2); left: calc(50% - ширина_блока/2); 

Отслеживать
ответ дан 6 мар 2016 в 18:02
random2093847 random2093847
872 4 4 серебряных знака 17 17 бронзовых знаков

Разобрался, может кому понадобится, добавил:

position: fixed; top: 50%; left: 50%; margin-top: -. ; margin-left: -. ; Вместо точек размер блока / на 2.

Отслеживать
ответ дан 5 мар 2016 в 15:04
169 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков

Укажите у родителя

display: flex; // FlexBox align-items: center; // выравнивает по вертикали justify-content: center; //выравнивает по горизонтали 

Отслеживать
ответ дан 6 мар 2016 в 19:39
Kuat Mustafin Kuat Mustafin
692 4 4 серебряных знака 11 11 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

Вот форма без флексбоксов.

Данная форма использует небольшое форматирование, но ширина всех полей ввода одинакова. Это приводит к тому, что правый край выглядит немного неровным, поскольку поля формы не располагаются прямо друг под другом. Если вас подобное устраивает, то хорошо, и нет необходимости что-либо делать дальше.

Но что если мы хотим растянуть поля ввода до правого края? Без флексбоксов получить такой результат было бы несколько болезненно. Особенно, если сама форма гибкая (то есть она расширяется и сжимается в зависимости от ширины родительского элемента или области просмотра). Если форма гибкая, то каждое поле ввода тоже должно расширяться и сжиматься по мере необходимости. В этом случае вы не можете использовать фиксированную ширину для полей ввода, потому что как только ширина формы изменится, ширина полей станет некорректной. Так что потребуется схитрить, чтобы всё работало правильно.

Тем не менее, флексбоксы позволяют сделать это без каких-либо магических трюков.

Сперва для каждого класса .form-row устанавливаем отображение display: flex .

.form-row

Обратите внимание, что мы также использовали justify-content: flex-end , но это не обязательно. В этом случае кнопка просто перемещается вправо.

Теперь, когда каждая строка формы является флекс-контейнером, мы применяем следующий код к полям ввода.

.form-row > input

Таким образом, применяя flex: 1 к полям ввода, мы заставляем эти поля использовать всё доступное свободное пространство после меток . При этом метки сохраняют свою обычную ширину с учётом padding . Поля ввода начинаются сразу после них и растягиваются до самого конца.

Поля ввода одинаковой ширины

Вы можете изменить приведённый выше пример так, чтобы левый край полей формы также был в линию (как и правый край).

Всё, что мы здесь сделали, это добавили flex: 1 к меткам, а для полей ввода изменили на flex: 2 .

.form-row > label < padding: .5em 1em .5em 0; flex: 1; >.form-row > input

Это задаёт ширину полей формы как удвоенная ширина меток. Вы можете настроить это соотношение в зависимости от ширины формы или ожидаемой ширины. К примеру, можно использовать соотношение 1 к 3 или 1 к 4 для широких форм.

Если вы используете форму с фиксированной шириной, то можете установить одно соотношение, которое лучше всего подходит для формы. Если это гибкая форма, которая меняет ширину в зависимости от ширины области просмотра, то можете использовать медиа-запросы, чтобы установить разное соотношение для каждой точки останова.

Адаптивные поля ввода одинаковой ширины

Вот пример с медиа-запросами, которые меняют соотношение при изменении размера области просмотра.

Посмотрите эту форму на большом экране, затем уменьшите размер браузера. Вы должны увидеть как регулируется ширина полей ввода, когда вы уменьшаете окно браузера.

См. также

• flex
• justify-content
• place-content
• Выравнивание с помощью флексбоксов
• Загрузка файлов
• Кнопки
• Кнопки
• Отправка данных формы
• Переключатели
• Переключатели
• Поле для ввода пароля
• Поле для пароля
• Пользовательские формы
• Построение форм
• Свойства flex-контейнера
• Скрытое поле
• Стилизация переключателей
• Стилизация флажков
• Сумасшедшие формы
• Текстовое поле
• Текстовое поле
• Флажки
• Флажки
• Формы в Bootstrap 4
• Формы в HTML

Выровнять форму по центру страницы

Выровнять по центру страницы
.

Изменить форму поиска и выровнять по центру
Добрый вечер, подскажите, пожалуйста, как изменить цвет, углы, цвет границы формы поиска. Я вставил.

Выровнять контент по центру страницы
не подскажите как выравнять этот скрипт по центру ? <img style="top: 7%; left: 30%; width: 563px;.

Как выровнять по центру форму логин и пароль?
Всем привет! Кто знает, помогите. Не знаю как можно выровнять форму логин и пароль. Вот css код.

38 / 37 / 29
Регистрация: 02.12.2013
Сообщений: 244

1 2 3 4 5 6

position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;

А вообще очень классная вещь FLEX для позиционирования.

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11
Listed Illusion, можно использовать такой вариант:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

 html> head> meta charset="utf-8"> style> html, body #action_form < position:absolute; width:200px; height:150px; left:50%; top:50%; margin-left:-100px; margin-top:-100px; border:1px solid >form /style> /head> body> div id="action_form"> form action="game/game.php" method="post"> label for="username">Логин:/label> input name="username" id="username" type="text">br/> label for="password">Пароль:/label> input name="password" id="password" type="password"> p>input type="submit" value="Войти">/p> /form> /div> /body> /html>

Сообщение от kposs

А вообще очень классная вещь FLEX для позиционирования.

Flex вещь конечно хорошая, но пока не совсем кроссбраузерная, ie к сожалению пока целиком не поддерживает, данное удобство.

38 / 37 / 29
Регистрация: 02.12.2013
Сообщений: 244
Fedor92,
Поддержка:

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11
kposs, всё верно, а теперь посмотрите на столбик с IE.
Регистрация: 12.05.2016
Сообщений: 55

P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =)

38 / 37 / 29
Регистрация: 02.12.2013
Сообщений: 244

Listed Illusion, мои предположения, что просто ты высоту в body не указываешь) В данном случае я даже хз от чего проценты считаются и считаются ли вообще. От размера окна, но как-то все это размыто.

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11

Сообщение от Listed Illusion

P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =)

Приложите код(HTML+CSS), чтобы можно было ответить на Ваш вопрос.
Регистрация: 12.05.2016
Сообщений: 55

Сообщение от Fedor92

Приложите код(HTML+CSS), чтобы можно было ответить на Ваш вопрос.

вот в том-то и дело что вверху топика весь код страницы(вместе со всем css), на ней пусто и ничего кроме формы для авторизации нету

Регистрация: 13.03.2015
Сообщений: 215

Сообщение от Listed Illusion

P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =)

Если это весь код, то я тоже ничего не понимаю.. Попробуйте указать

1 2 3

height: 100%; margin: 0; vertical-align: top;

— вам ведь нужно чтобы форма была вверху?
Регистрация: 12.05.2016
Сообщений: 55
Если это весь код, то я тоже ничего не понимаю..

сначала пинал браузер — попробовал через другие глянуть и результат тот же
потом пинал систему — перезагрузился, а проблема осталась
туда же all:unset, но с ним маргин вообще почему-то перестал работать и ни в какую ничего никуда не хотел сдвигать

вам ведь нужно чтобы форма была вверху?

вертикально и горизонтально по середине страницы

P.S. ну да ладно, костылями так костылями
Вряд ли без поллитра тут разберешься что не так с этим маргином и почему. Всем большое спасибо!

Регистрация: 13.03.2015
Сообщений: 215

Сообщение от Listed Illusion

вертикально и горизонтально по середине страницы
Попробуйте обернуть форму в div, которому дать:

1 2 3

position: relative; top: calc (50% - x); left: calc (50% - y);

Где x и y соответственно 1/2 от высоты и ширины вашего div блока, внутри которого живет форма. Не уверен, что это правильное решение, и уж тем более не единственное — но, думаю, что рабочее.

Регистрация: 12.05.2016
Сообщений: 3
Вот держите:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

html> head> meta charset="utf-8"> link rel="stylesheet" href="main.css" type="text/css" /> /head> body> div id="action_form" style="left: 50%;margin-left: -150px;position: absolute;width: 1000px;margin-top: 20%;"> form action="game/game.php" method="post"> label for="username">Логин:/label> input name="username" id="username" type="text">br/> label for="password">Пароль:/label> input name="password" id="password" type="password"> p>input type="submit" value="Войти">/p> /form> /div> /body> /html>

Регистрация: 12.05.2016
Сообщений: 55

Все, понял (и тут нашел несколько тем, и на хабре статью о маргине где однозначный ответ был получен) почему маргин себя так ведет, он берет отступ не от верха страницы а ширины(зачем. ) родительского элемента. ну все, теперь жить проще

Регистрация: 15.05.2015
Сообщений: 350

Listed Illusion, Fedor92, Сергей8008, vnmslf, можно ли это сделать без использования CSS? Только в HTML коде страницы?

1 2 3 4

Form action="" method="get" name=""> label>Введите пароль: input type="password" size="20">/label> input type="submit" name="submit1" value="OK"> /Form>

Добавлено через 8 минут
я так понимаю мне это все достаточно в Div заключить и все?

1 2 3 4 5 6

div align = "center"> Form action="" method="get" name=""> label>Введите пароль: input type="password" size="20">/label> input type="submit" name="submit1" value="OK"> /Form> /div>