Выравнивание элементов в форме по центру.
В этой форме подписки текстовые поля и форма подписки выравниваются по левому краю. Давайте рассмотрим техники, которые позволят выравнять эти элементы по центру.
Больше моих уроков по 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 и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как выровнять input по центру?
не получается выровнять по центру форму. Уже всё попробовал. Flex использовать не вариант. Так же не получается сделать кнопку по ширине input-ов или тоже разместить по центру.
form < display: block; background: #5B3C67; padding: 50px; width: 100%; color: white; margin-right: auto; margin-left: auto; >form input < text-align: center; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 23%; height: 15px; border: 1px solid #ff8c00; >.button < width: 20%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; >.button:hover
Свяжитесь с нами
Отслеживать
задан 5 июн 2019 в 18:23
Daniil Kedrov Daniil Kedrov
564 1 1 золотой знак 5 5 серебряных знаков 12 12 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
не нужно добавлять у самих input-ов text-align:center, полезнее у родителя:
form
по поводу одинаковой ширины — определить у input и button
width: 25%; только еще у input добавить
box-sizing: border-box; чтобы padding не влияли на ширину
form < display: block; background: #5B3C67; padding: 50px; width: 100%; color: white; margin-right: auto; margin-left: auto; text-align: center; >form input < box-sizing: border-box; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 25%; height: 35px; border: 1px solid #ff8c00; >.button < width: 25%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; >.button:hover
Свяжитесь с нами
Отслеживать
ответ дан 5 июн 2019 в 18:37
2,336 2 2 золотых знака 9 9 серебряных знаков 20 20 бронзовых знаков
.center < display: flex; justify-content: center; margin: 0 auto; padding: 10px 20px; >form < background: #5B3C67; padding: 50px; color: white; margin-right: auto; margin-left: auto; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; >form input < text-align: center; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 23%; height: 15px; border: 1px solid #ff8c00; width: 150px; >.button < width: 20%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; width: 200px; >.button:hover
Свяжитесь с нами
Отслеживать
ответ дан 5 июн 2019 в 18:45
353 1 1 серебряный знак 9 9 бронзовых знаков
Тоже как вариант, спасибо
5 июн 2019 в 19:02
Разобрался. Надо было добавить:
form input
Отслеживать
ответ дан 5 июн 2019 в 18:37
Daniil Kedrov Daniil Kedrov
564 1 1 золотой знак 5 5 серебряных знаков 12 12 бронзовых знаков
Можно просто margin: auto; .
5 июн 2019 в 18:46
- html
- css
- css3
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS input по центру как сделать?
Есть input логин внутри div
Нужно что было поле ввода было ровно по середине а не слева скраю, что прописать?
Лучший ответ
инпуту пропиши
display:block;
margin:0 auto;
XimroyПрофи (645) 5 лет назад
Спасибо, очень помогли!
Остальные ответы
А можно и так
nowhere manМудрец (16105) 5 лет назад
Не нужно так, тег center устарел, лучше так:
̑̈☣̑̋̑̎̑̈ ☠̤̥̤̭̤ ☢J̯̤ͣͮͣ̐̈ Высший разум (160381) Да какая разница устарел он или не устарел он есть и будет его не когда не выкинут из HTML Эта часть истории HTML и говорить правильно или неправильно и что не надо так делать эта просто абсурдно как удобней так пусть и делает по крайней мере даже начинающей помёт что делает этот тег ⚤
У дива можно прописать
text-align:center;
Похожие вопросы
Как переместить поле поиска в правую сторону?
Не могу найти у себя ошибку. Поле поиска не могу переместить на правую сторону.
5 ответов
Вы указывайте в html название класса sidebar_conteiner, а стили прописывается для класса с названием .sidebar_container, соответственно стили не будет работать.
Поиск
ul.menu li a:hover < color: #e4ec04; >.site_content < width: 880px; overflow: hidden; margin: 20px auto 0 auto; background-color: white; >.sidebar_container
благодарствую !
Код ваш весь покажите, так сложно подсказать. Теоретически нужно использовать margin или padding для того, чтобы двигать html элементы.
Sign up or Log in to write an answer
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Общие ссылки
- Отзывы
- Политика конфидециальности
- Условия использования
- Блог
- Цена и оплата
- Курсы и скринкасты
- Сертификаты
- Партнерская программа
- Комьюнити
Наши курсы и скринкасты
- HTML/CSS Advanced
- Bootstrap 4
- Vue JS
- Linux, GIT and web-hosting
- HTML and CSS
- Modern Javascript
- Javascript/jQuery
- Codeigniter
- Все курсы и скринкасты