Как отцентровать форму html

Выравнивание формы по центру на 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.6k 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.11.15.1019

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

Выравнивание элементов в форме по центру.

В этой форме подписки текстовые поля и форма подписки выравниваются по левому краю. Давайте рассмотрим техники, которые позволят выравнять эти элементы по центру.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Сначала давайте займемся элементами

. Здесь все довольно просто, для их выравнивание по центру нужно воспользоваться свойством text-align:center.

.mysubform p text-align:center;>

С кнопкой отправить несколько сложнее, вот стили CSS, которые решают эту проблему.

.mysubform input[type="submit"] < padding:7px; background:rgba(0, 0, 0, 0); color:#FFFC00; border:2px solid #FFFC00; border-radius:5px; margin:auto; width:200px; >

Нужно присвоить кнопке какое-то конкретное значение свойства width и применить свойство margin:auto.

Смотрим результат здесь:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

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

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

Выровнять контент по центру страницы
не подскажите как выравнять этот скрипт по центру ? <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>

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

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

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

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

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

Ilya Suhodolskiy @suhodolskiy