У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то способ, мы все равно не получаем желаемого результата, и наш пользовательский интерфейс ломается. В этой статье я дам вам необходимые советы, которые помогут вам сделать красивый дизайн, не нарушая пользовательского интерфейса.
Во-первых, мы должны сделать наш 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
Мы изучили осносные способы, с помощью которых вы можете центрировать элемент внутри его родительского элемента. Хотя существуют и другие способы центрирования элементов, эти методы наиболее просты в исполнении и имеют низкую вероятность ошибки, которая может нарушить ваш пользовательский интерфейс.
16.05.2022 21:25
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату, категорию, пол, местоположение, рейтинг, должность, страну, штат и т.д... и даже после заполнения всех этих данных вам будет предложена капча, которую...
18.04.2022 13:17
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы...
13.04.2022 15:26
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей. Первое, что вам нужно сделать, это установить гем Flatpickr через npm. Вы можете найти эту информацию на их сайте или просто использовать следующий код:
11.04.2022 20:00
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
08.04.2022 19:39
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
06.04.2022 20:06
Анализ настроения текстовых сообщений может быть настолько сложным или простым, насколько вы его сделаете. Как и в любом ML-проекте, вы можете выбрать алгоритм, обучить модель и справиться со всеми проблемами, которые с этим связаны.