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

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

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

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

На этой странице вы найдете «Код для вставки на сайт. 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"); 

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

Привет всем. Подскажите, как сделать выравнивание формы авторизации по центру под разное расширение экрана. На компьютере по центру форма, а вот на ноуте — оказывается внизу. Хочется централизации на любом расширении

• Вопрос задан более трёх лет назад
• 8793 просмотра

2 комментария

Оценить 2 комментария

Ilya Suhodolskiy @suhodolskiy

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

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

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

Выровнять контент по центру страницы
не подскажите как выравнять этот скрипт по центру ? <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 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 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 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
kposs, всё верно, а теперь посмотрите на столбик с IE.
Регистрация: 12.05.2016
Сообщений: 55

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

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

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

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 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>

Макет

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

На этой странице

Формы

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

• Для знакомства с формами в браузере смотите документации по формам MDN с полным списком доступных атрибутов.
• внутри по умолчанию type=»submit» , поэтому старайтесь быть конкретным и всегда включайте type .
• Вы можете отключить каждый элемент формы в форме с помощью атрибута disabled .

Поскольку Bootstrap применяет display: block и width: 100% почти ко всем элементам управления формой, то формы по умолчанию будут располагаться вертикально. Дополнительные классы могут использоваться для изменения этого макета для каждой формы.

Утилиты

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

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

Example label
Another label

div class="mb-3"> label for="formGroupExampleInput" class="form-label">Example labellabel> input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder"> div> div class="mb-3"> label for="formGroupExampleInput2" class="form-label">Another labellabel> input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder"> div>

Сетка форм

Более сложные формы могут быть построены с использованием наших классов сетки. Используйте их для расположения форм, которые требуют множественных колонок, различной ширины и других дополнительных параметров выравнивания. Необходимо, чтобы переменная Sass $enable-grid-classes была включена (по умолчанию включена).

div class="row"> div class="col"> input type="text" class="form-control" placeholder="First name" aria-label="First name"> div> div class="col"> input type="text" class="form-control" placeholder="Last name" aria-label="Last name"> div> div>

Отступы

Добавляя классы модификаторов отступов, Вы можете контролировать ширину промежутков как в строчном, так и в блочном направлении. Также требуется, чтобы переменная Sass $enable-grid-classes (по умолчанию включена).

div class="row g-3"> div class="col"> input type="text" class="form-control" placeholder="Имя" aria-label="Имя"> div> div class="col"> input type="text" class="form-control" placeholder="Фамилия" aria-label="Фамилия"> div> div>

С помощью системы сеток также можно создавать более сложные макеты.

form class="row g-3"> div class="col-md-6"> label for="inputEmail4" class="form-label">Эл. адресlabel> input type="email" class="form-control" id="inputEmail4"> div> div class="col-md-6"> label for="inputPassword4" class="form-label">Парольlabel> input type="password" class="form-control" id="inputPassword4"> div> div class="col-12"> label for="inputAddress" class="form-label">Адресlabel> input type="text" class="form-control" id="inputAddress" placeholder="Проспект Ленина"> div> div class="col-12"> label for="inputAddress2" class="form-label">Адрес 2label> input type="text" class="form-control" id="inputAddress2" placeholder="Квартира"> div> div class="col-md-6"> label for="inputCity" class="form-label">Городlabel> input type="text" class="form-control" id="inputCity" placeholder="Брянск"> div> div class="col-md-4"> label for="inputState" class="form-label">Областьlabel> select id="inputState" class="form-select"> option selected>Выберите. option> option>. option> select> div> div class="col-md-2"> label for="inputZip" class="form-label">Индексlabel> input type="text" class="form-control" id="inputZip"> div> div class="col-12"> div class="form-check"> input class="form-check-input" type="checkbox" id="gridCheck"> label class="form-check-label" for="gridCheck"> Проверить меня label> div> div> div class="col-12"> button type="submit" class="btn btn-primary">Войти в системуbutton> div> form>

Горизонтальные формы

Создайте горизонтальные формы с помощью сеток, добавив класс .row к группам форм и используя классы .col-*-* для задания ширины ваших надписей и элементов контроля. Обязательно добавьте класс .col-form-label также и в ваши для того, чтобы они приобрели вертикальное центрирование относительно связанных с ними элементов контроля форм.

Временами вам может понадобиться классы марджина или паддинга, чтобы создать классное выравнивание. Например, мы удалили padding-top в наших вертикально расположенных лейблах ввода «радио», для лучшего выравнивания текста.

form> div class="row mb-3"> label for="inputEmail3" class="col-sm-2 col-form-label">Emaillabel> div class="col-sm-10"> input type="email" class="form-control" id="inputEmail3"> div> div> div class="row mb-3"> label for="inputPassword3" class="col-sm-2 col-form-label">Passwordlabel> div class="col-sm-10"> input type="password" class="form-control" id="inputPassword3"> div> div> fieldset class="row mb-3"> legend class="col-form-label col-sm-2 pt-0">Radioslegend> div class="col-sm-10"> div class="form-check"> input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> label class="form-check-label" for="gridRadios1"> First radio label> div> div class="form-check"> input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> label class="form-check-label" for="gridRadios2"> Second radio label> div> div class="form-check disabled"> input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> label class="form-check-label" for="gridRadios3"> Third disabled radio label> div> div> fieldset> div class="row mb-3"> div class="col-sm-10 offset-sm-2"> div class="form-check"> input class="form-check-input" type="checkbox" id="gridCheck1"> label class="form-check-label" for="gridCheck1"> Example checkbox label> div> div> div> button type="submit" class="btn btn-primary">Sign inbutton> form>

Размеры надписей горизонтальных форм

Обязательно используйте классы .col-form-label-sm или .col-form-label-lg в своих для того, чтобы размеры шрифтов названия формы и вспомогательной надписи в пустой форме (т.н. placeholder) ввода совпадали.