Как разместить форму заявки по центру?
index1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Пример простой формы обратной связи" /> <title>Форма связи</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> <link rel="stylesheet" type="text/css" media="screen" href="style1.css"> </head> <body> <header> </header> <main> <div class="main-content"> <form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'> <div class="form-zvonok"> <div> <label>Имя <span>*</span></label> <input type='text' name='username' required></div> <div> <label>Номер телефона<span>*</span></label> <input type='text' name='usernumber' required></div> <div> <label>E-mail<span>*</span></label> <input type='text' name='question'> </div> <input class="bot-send-mail" type='submit' value='Послать заявку'> </div> </form> </div> </main> <footer> </footer> </body> </html> |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Пример простой формы обратной связи" /> <title>Форма связи</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> <link rel="stylesheet" type="text/css" media="screen" href="style1.css"> </head> <body> <header> </header> <main> <div class="main-content"> <form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'> <div class="form-zvonok"> <div> <label>Имя <span>*</span></label> <input type='text' name='username' required></div> <div> <label>Номер телефона<span>*</span></label> <input type='text' name='usernumber' required></div> <div> <label>E-mail<span>*</span></label> <input type='text' name='question'> </div> <input class="bot-send-mail" type='submit' value='Послать заявку'> </div> </form> </div> </main> <footer> </footer> </body> </html>
style1.css
* { font-family: cursive; } .obratnuj-zvonok{ width: 100%; max-width: 350px; } .form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; } .form-zvonok div{ padding: 15px 0; } .bot-send-mail{ box-sizing: border-box; width: 100%; } .form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; } .form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; } .form-zvonok label span{ color: red; } .form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; } .form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; } |
* { font-family: cursive; } .obratnuj-zvonok{ width: 100%; max-width: 350px; } .form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; } .form-zvonok div{ padding: 15px 0; } .bot-send-mail{ box-sizing: border-box; width: 100%; } .form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; } .form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; } .form-zvonok label span{ color: red; } .form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; } .form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; }
Дополнительно:
.obratnuj-zvonok{ width: 100%; max-width: 350px; margin: 0 auto; } |
.obratnuj-zvonok{ width: 100%; max-width: 350px; margin: 0 auto; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения формы заявки по центру страницы можно использовать следующий CSS код:
```html
.form-container {
width: 50%; /* задаем ширину формы */
margin: 0 auto; /* центрируем форму по горизонтали */
padding: 20px; /* добавляем отступы вокруг формы */
border: 1px solid #ccc; /* добавляем рамку вокруг формы */
}
```
В данном примере мы создаем контейнер с классом "form-container", который имеет ширину 50%, отступы и рамку. Затем внутри этого контейнера размещаем форму с необходимыми полями. При использовании данного CSS кода форма будет автоматически центрироваться по горизонтали на странице.
Вы также можете настраивать стили формы и контейнера по своему усмотрению, добавляя нужные свойства CSS. Надеюсь, данный ответ поможет вам разместить форму заявки по центру страницы. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.