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

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

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

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

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

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

Ilya Suhodolskiy @suhodolskiy

Как выровнять форму по центру?

Во-первых, не указан box-sizing: border-box, поэтому инпуты были больше чем нужно, за счет паддингов и границ.
Ну и ширину лучше задать форме, а инпутам и кнопку ширину 100%. Из-за отсутствия фиксированной ширины у формы, она занимала весь экран и не центрировалась.

* < box-sizing: border-box; >.form < display: block; margin: 0 auto; width: 340px; >input < border-radius: 5px; width: 100%; height: 50px; border: 1px solid #bbbbbb; display: block; padding-left: 20px; >.btn-form

Ответ написан более двух лет назад

Комментировать

Нравится 1 Комментировать

Ответы на вопрос 2

Андрей Мартынкевич @AndrewMarty

Как выровнять форму вам уже написали.

почему нижняя кнопка меньше остальных ведь ширина всем задана одинаковая

Потому что стоит значение box-sizing: content-box. Можете прописать следующее:

*, ::after, ::before

Ответ написан более двух лет назад

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

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

Больше моих уроков по 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 и верстке сайтов здесь.

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

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

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

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя атрибут align тега .

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left , то визуально слой сместится на указанное значение вправо. Зная ширину слоя, его можно сместить так, чтобы слой располагался по центру веб-страницы. Для чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя в процентах и полученное значение разделить пополам. Результат и будет значением свойства margin-left (пример 1).

Пример 1. Использование margin-left

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа слева и справа (пример 2).

Пример 2. Использование отступов

        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

В данном примере показано размещение слоя шириной 40% по центру. Хотя сама ширина никак напрямую не задается, она определяется значением свойств margin-left и margin-right . Они устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

В данном примере ширина слоя устанавливается 400 пикселов и выравнивается по центру с помощью значения 0 auto свойства margin . Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.

Атрибут align тега

Еще один способ размещения по центру вообще не требует использования никаких стилей и связан с атрибутом align тега . Указывая значение center , заставляем содержимое слоя выравниваться по его центру. Поэтому необходимо создать два слоя, один из которых будет служить контейнером для другого, как показано в примере 4.

Пример 4. Атрибут align

Опять же, как и в случае использования свойства text-align , размещаться по центру будет и текст внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать не требуется, она будет вычисляться автоматически и занимать все доступное пространство веб-страницы.

Абсолютное позиционирование слоя

При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого свойства z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.

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

Следующий шаг — задаем абсолютное позиционирование слоя через position: absolute . Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top . Эти значения остаются неизменными, независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить свойства margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left ) и высоты (для margin-top ).

Чтобы высота слоя не менялась из-за его контента, включен overflow: auto , он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width , padding и border .

Пример 6. Ширина слоя в процентах

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.

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