Как центрировать div по горизонтали в Bootstrap 4 и 5 2022
Категория: Общие вопросы
Автор:
Джейкоб Летт
Поделись этим
Просмотрите мои бесплатные руководства по веб-сайтам
Очень часто в макетах веб-дизайна столбец располагается горизонтально по центру строки или контейнера. Но как это сделать с помощью классов Bootstrap? Ниже приведены несколько различных способов достижения этого эффекта.
Обновление: Эти методы работают как для Bootstrap 5, так и для Bootstrap 4. Вот демо-версия codepen только для Bootstrap 5 этих горизонтально центрированных столбцов.
Вариант 1 — Смещение Bootstrap
Вы можете использовать классы смещения Bootstrap для горизонтального смещения столбцов влево или вправо. Это полезно, когда вы хотите, чтобы один столбец имел максимальную ширину, но центрировал его в строке.
<дел>
<дел>
Смотрите! Я центрирован по горизонтали
Вариант 2 — Margin Auto
В этом примере устанавливается максимальная ширина для средних контрольных точек и до 8 столбцов.
Затем я добавил класс полезности .mx-auto , который устанавливает поля слева и справа для автоматического центрирования по горизонтали внутри контейнера .row .
<дел>
<дел>
Я тоже!
Вариант 3 — Утилита ширины Bootstrap
В этом примере я использую класс утилиты ширины Bootstrap .w-50, чтобы сделать div всегда шириной 50%. Затем я добавил служебный класс .mx-auto , который устанавливает поля слева и справа для автоматического центрирования по горизонтали внутри .row контейнер.
<дел>
<дел>
Я Трое!
Вариант 4 — Использование классов Flexbox
Если у вас есть несколько элементов, которые вы хотите центрировать, вы можете попробовать использовать комбинацию классов flexbox. Вот шпаргалка flexbox, показывающая, как они работают.
<дел>
<дел>
пункт 1
<дел>
пункт 2
<дел>
пункт 3
Заключение
Как и в большинстве случаев в веб-разработке, одного и того же результата можно добиться несколькими способами. Выбор правильного подхода для вашего проекта зависит от того, что, по вашему мнению, легче всего запомнить и поддерживать. Лично мне нравится вариант 1, потому что он позволяет центрировать столбец по горизонтали на больших экранах, а затем переходить на полную ширину на мобильных устройствах.
Посмотреть демо-версию Codepen
Тема:
Похожие посты
Как спроектировать и создать промышленный веб-сайт?
3 способа сэкономить на медийных кампаниях Google Ads
Каковы размеры текстового шрифта Bootstrap 4 и как их изменить?
5 вещей, которые следует учитывать компаниям перед редизайном веб-сайта
Точки останова Bootstrap 5 и 4 — медиа-запросы [фрагмент кода]
Теги:
Начальная загрузка CSS
Первоначально опубликовано 14 августа 2019 г., обновлено на
Хотите получать уведомления о новых сообщениях по электронной почте? Присоединяйтесь к моей рассылке по электронной почте
поделиться этим
Центр A Div Горизонтально в CSS
Использовать свойство MARGE для центра A DIV HORIZONTALLY в CSS
Используйте Flexbox для центра A Div в CSS
. Установите для div значение inline-block и используйте свойство text-align , чтобы отцентрировать его по горизонтали в CSS
В статье будет обсуждаться несколько способов горизонтального центрирования раздел в CSS.
Используйте свойство
margin для центрирования div Horizontally в CSS
Используя свойство margin , мы можем центрировать div по горизонтали в CSS.
Свойство margin является сокращением для установки полей во всех четырех направлениях от элемента. Мы можем использовать это свойство, чтобы назначить поля сверху , справа , снизу и слева по порядку.
Мы можем использовать опцию auto для левого и правого полей, чтобы горизонтально центрировать div . Верхнее и нижнее поля можно установить равными
0 .
Опция auto поместит элемент в центр и разделит поровну левое и правое поля. Мы должны указать ширину элемента, который будет центрирован.
Элемент будет занимать заданную ширину, а оставшееся пространство по горизонтали будет разделено поровну слева и справа.
Возьмем пример. Если ширина элемента равна 50% , свойство auto создаст левое поле 25% и правое поле 25% .
Мы также можем использовать свойство display для установки элемента в table . В таком случае нет необходимости указывать ширину, если в таблице есть какое-то содержимое.
Используется ширина содержимого. Когда мы не пишем никакого контента во внутренний div , мы указываем определенную ширину.
Например, создайте
div с именем класса externalDiv в HTML. Затем вставьте еще innerDiv внутрь externalDiv в HTML.
В CSS установите width на 100% и background на blue в классе externalDiv . Затем выберите innerDiv и установите для свойства display значение table .
Установить фон до красный , высота и ширина до 10vh и 10vw . Наконец, установите для поля значение 0 auto .
Здесь 0 в свойстве margin является полем для верхнего и нижнего края. Параметр auto предназначен для полей слева и справа. Мы можем центрировать div
Мы можем использовать свойства flexbox для центрирования div по горизонтали в CSS.
Flexbox обеспечивает простой способ центрирования элемента по вертикали и горизонтали. Мы можем создать flex и определить, как элементы позиционируются во flexbox.
Свойство justify-content можно использовать для указания горизонтального положения содержимого внутри flexbox, когда содержимое не занимает все доступное пространство. Мы можем создать flexbox во внешнем контейнере и установить положение внутреннего контейнера в центре, используя свойство justify-content
.
Например, выберите класс innerDiv и установите свойства height и width на 10vh и 10vw . Установите цвет черный в качестве цвета фона. Затем выберите класс externalDiv и задайте ширину от до 100% .
Установите цвет фона на 100% . Затем создайте контейнер flexbox, задав для свойства display значение flex . После него пропишите опцию center в свойство justify-content .
Таким образом, мы можем использовать CSS Flexbox для центрирования div по горизонтали в CSS.
div значение inline-block и используйте свойство text-align для его центрирования по горизонтали в CSS
встроенный блок 9элемент 0027. Как и встроенный, элемент
inline-block не начинается с новой строки.
Однако мы можем установить ширину и высоту . Затем мы можем использовать свойство text-align во внешнем div для центрирования внутреннего div по горизонтали.
Внутренний div наследует свойство text-align от внешнего div , и элемент можно центрировать.
Выбор правильного подхода для вашего проекта зависит от того, что, по вашему мнению, легче всего запомнить и поддерживать. Лично мне нравится вариант 1, потому что он позволяет центрировать столбец по горизонтали на больших экранах, а затем переходить на полную ширину на мобильных устройствах. 
Установите для 
Мы должны указать ширину элемента, который будет центрирован. 
Затем выберите 
После него пропишите опцию 