У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то способ, мы все равно не получаем желаемого результата, и наш пользовательский интерфейс ломается. В этой статье я дам вам необходимые советы, которые помогут вам сделать красивый дизайн, не нарушая пользовательского интерфейса.
Во-первых, мы должны сделать наш div , который будет центрирован с помощью CSS. Для этого нам нужно создать HTML-файл и подключить его к CSS.
Эта HTML-разметка содержит наш div , который должен быть отцентрирован, и он связан с нашим файлом CSS (style.css).
Теперь перейдем к способам, с помощью которых мы можем центрировать наш div. Основной стиль нашего div таков. Здесь я создал div высотой и шириной 200px и фоновым цветом красный. Я также установил margin и padding всего HTML равными 0, но это вопрос личных предпочтений.
Этот подход часто использовался в ранние времена CSS для центрирования div на странице. При этом div присваивается абсолютная позиция, чтобы его можно было вывести из естественного потока документа. Левый верхний угол div помещается в центр страницы путем перемещения его на 50% сверху и слева. Теперь с помощью translate(-50%,-50%) сдвинем div к верху на 50% от его высоты и влево на 50% от его ширины. Таким образом, центр div будет совпадать с центром страницы. Вот что теперь будет на нашей странице.
Этот подход полезен для некоторых текстов или div, которые вы хотите отцентрировать только по горизонтали. Вот как вам нужно это сделать:...
При таком подходе div автоматически устанавливает свои поля в соответствии с пространством, которое он имеет в DOM. Единственная оговорка заключается в том, что он работает только для блочных элементов, поэтому он не сработает для любых inline или inline-block элементов, поскольку они занимают только необходимое пространство в DOM, в то время как блочные элементы занимают все пространство DOM по горизонтали. Вот как это выглядит в нашем проекте:-
Итак, сейчас мы воспользуемся новейшим подходом к центрированию div в CSS, которым является flexbox. Он делает горизонтальное поле и вертикальное поле, которые делят страницу на четыре квадранта с центром страницы в качестве начала координат.
Горизонтальное поле называется главной осью , а вертикальное поле - поперечной осью. Чтобы сделать flex-контейнер, необходимо установить отображение родительского элемента на flex, а также жестко закодировать высоту и ширину родительского элемента. Таким образом, вы создадите гибкий контейнер.
Мы преобразовали наш body в flex-контейнер и задали ему высоту 100viewport height, а ширину 100viewport width. Мы можем центрировать div по горизонтали с помощью свойства justify-content, установленного в center. Это центрирует div по главной оси гибкого контейнера. Для центрирования div по вертикали мы используем свойство align-items, установленное в center. Оно центрирует div по поперечной оси гибкого контейнера. Это наш div, снова центрированный по центру страницы.
Все вышеперечисленные советы по-прежнему работают с текстовыми элементами, но есть одно свойство, созданное специально для текстовых элементов. Если вы установите свойство text-align в center , то текст внутри нашего div будет выровнен по центру. Вот как это сделать.
Этот метод позволяет центрировать не только текст, но и любой инлайн- или инлайн-блочный элемент. Вот как выглядит наш текст внутри div
Мы изучили осносные способы, с помощью которых вы можете центрировать элемент внутри его родительского элемента. Хотя существуют и другие способы центрирования элементов, эти методы наиболее просты в исполнении и имеют низкую вероятность ошибки, которая может нарушить ваш пользовательский интерфейс.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.