Center div in div: html — How can I horizontally center an element?

Как центрировать div по горизонтали в Bootstrap 4 и 5 2022

  • Категория: Общие вопросы
  • Автор: Джейкоб Летт
  •   Поделись этим
Просмотрите мои бесплатные руководства по веб-сайтам

Очень часто в макетах веб-дизайна столбец располагается горизонтально по центру строки или контейнера. Но как это сделать с помощью классов Bootstrap? Ниже приведены несколько различных способов достижения этого эффекта.

Обновление: Эти методы работают как для Bootstrap 5, так и для Bootstrap 4. Вот демо-версия codepen только для Bootstrap 5 этих горизонтально центрированных столбцов.

Вариант 1 — Смещение Bootstrap

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

 <дел>
    <дел>
       

Смотрите! Я центрирован по горизонтали

Вариант 2 — Margin Auto

В этом примере устанавливается максимальная ширина для средних контрольных точек и до 8 столбцов.

Затем я добавил класс полезности .mx-auto , который устанавливает поля слева и справа для автоматического центрирования по горизонтали внутри контейнера .row .

 <дел>
    <дел>
       

Я тоже!