Выравниваем HTML-элемент вертикально и горизонтально | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Team Lead Архитектура и шаблоны проектирования Разработчик IoT C# Developer. Professional PostgreSQL Подготовка к сертификации Oracle Java Programmer (OCAJP) C# ASP.NET Core разработчик
-5%
Kotlin Backend Developer
-8%
iOS Developer. Professional
-8%
Symfony Framework Unity Game Developer. Basic JavaScript Developer. Professional Android Developer. Basic JavaScript Developer. Basic Java Developer. Professional Highload Architect Reverse-Engineering. Professional Java Developer. Basic PHP Developer. Professional Алгоритмы и структуры данных Framework Laravel Cloud Solution Architecture Vue.js разработчик Интенсив «Оптимизация в Java» Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив "Tarantool" PHP Developer. Basic
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK Дизайн сетей ЦОД Разработчик IoT PostgreSQL Экспресс-курс "Версионирование и командная работа с помощью Git"
-30%
Экспресс-курс «Введение в непрерывную поставку на базе Docker» Базы данных Reverse-Engineering. Professional Administrator Linux. Professional Network engineer Cloud Solution Architecture Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool" Network engineer. Basic
Корпоративные курсы
Безопасность веб-приложений IT-Recruiter Дизайн сетей ЦОД Компьютерное зрение Разработчик IoT Вебинар CERTIPORT Machine Learning. Professional
-6%
NoSQL Пентест. Практика тестирования на проникновение Java QA Engineer. Базовый курс Руководитель поддержки пользователей в IT
-8%
SRE практики и инструменты Cloud Solution Architecture Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Infrastructure as a code Супер-практикум по использованию и настройке GIT Промышленный ML на больших данных Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» BPMN: Моделирование бизнес-процессов Основы Windows Server
Специализации Курсы в разработке Подготовительные курсы Подписка
+7 499 938-92-02

Выравниваем HTML-элемент вертикально и горизонтально

Если вы работаете с HTML и CSS, то вы можете столкнуться с проблемой горизонтального и вертикального выравнивания элемента. Вариантов решить проблему — множество. Мы, конечно, понимаем, что настоящий IT-специалист должен иметь черный пояс по гуглению, однако все же рекомендуем сэкономить время в будущем и ознакомиться с самыми популярными подходами к выравниванию.

Подход № 1

В поддерживаемых браузерах (https://caniuse.com/transforms2d) вы сможете задействовать top: 50%/left: 50% в комбинации с translateX(-50%) translateY(-50%), что обеспечит динамическое горизонтальное/вертикальное центрирование элемента.

1-1801-65d53d.png

Вот как это выглядит в коде:

2-1801-fae2ce.png

Подход № 2

Тоже касается поддерживаемых браузеров. Вы можете присвоить свойству display _значение _flex _и задействовать _align-items: center с justify-content: center, что обеспечит вертикальное и горизонтальное центрирование. Но тут главное не забыть добавить вендорные префиксы — тогда данный прием сработает в большем числе браузеров:

3-1801-5f4689.png

Подход № 3

Случается, что надо удостовериться, что высота элемента html/body равняется 100 %. Для вертикального выравнивания присваиваем свойствам height _и _width родительского элемента значение 100%, а также добавляем display: table. Что касается дочернего элемента, то меняем значение display _на _table-cell и добавляем vertical-align: middle.

Если речь идет о горизонтальном выравнивании текста и прочих inline-элементов, можно задействовать text-align: center или margin: 0 auto, причем даже если вы работаете с блоковым элементом. По идее, код ниже должен быть эффективен в большинстве браузеров:

4-1801-17548d.png

Подход № 4

Тут мы предполагаем, что нам заранее известна высота текста, в нашем случае — это 18px. Теперь надо всего-то присвоить свойству position элемента значение absolute, а также подвинуть его сверху на 50% по отношению к родительскому элементу. В конце концов, свойству margin-top следует присвоить отрицательное значение, которое равно половине высоты элемента:

5-1801-8bb91c.png

Подход № 5

Иногда родительский элемент имеет фиксированную высоту. Для вертикального выравнивания надо всего-то присвоить свойству дочернего элемента line-height высоту родительского элемента.

6-1801-280ea2.png

По материалам StackOverflow: https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться