css — Центр вертикального выравнивания в Bootstrap 4
Важно! Вертикальный центр относительно высоты родителя
Если родительский элемент, который вы пытаетесь центрировать, не определен высота , нет решения вертикального центрирования будут работать!
Теперь о вертикальном центрировании…
Bootstrap 5 (Обновлено 2021)
Bootstrap 5 по-прежнему основан на flexbox , поэтому вертикальное центрирование работает так же, как Bootstrap 4. Например, align-items-center , justify-content-center или автоматические поля могут использоваться на родительском элементе flexbox ( row или d- флекс ).
использовать align-items-center в родительской строке flexbox ( row или d-flex )
использовать justify-content-center
в родительском столбце flexbox ( d-flex flex-column )
использовать my-auto на родительском flexbox
Вертикальный центр в Bootstrap 5
Bootstrap 4
Вы можете использовать новые утилиты flexbox & size, чтобы сделать контейнер полной высоты и display: flex . Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е.:html,тело) должна быть 100% ).
Вариант 1 align-self-center на дочернем flexbox
<дел>
<дел>
я по центру по вертикали
https://codeply.com/go/fFqaDe5Oey
Вариант 2 align-items-center на родительском flexbox ( .row is display:flex; flex-direction:row )
< раздел>
<дел>
<дел> <дел>
я по центру по вертикали
https://codeply.com/go/BumdFnmLuk
Вариант 3 justify-content-center на родительском flexbox ( .card это display:flex;flex-direct ион: столбец )
Подробнее о вертикальном центрировании Bootstrap 4
Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты, существует множество подходов к вертикальному центрированию.
выравнивание. http://www.codeply.com/go/WG15ZWC4lf
1 — Вертикальное центрирование с использованием автоматических полей:
Другой способ вертикального центрирования — использовать my-auto . Это отцентрирует элемент внутри его контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12 .
<дел>
<дел>
Карточка
Вертикальный центр с использованием автоматических полей Demo
my-auto представляет поля по вертикальной оси Y и эквивалентен:
margin-top: auto;
нижняя граница: авто;
2 — Вертикальный центр с Flexbox:
Начиная с Bootstrap 4 . row теперь display:flex вы можете просто использовать align-self-center
для любого столбца, чтобы центрировать его по вертикали…
<дел>
<дел>
Центр
<дел>
<дел>
выше
или используйте align-items-center для всех .row для вертикального выравнивания по центру всех col-* в строке…
<дел>
<дел>
Центр
<дел>
<дел>
выше
Вертикальный центр Столбцы разной высоты Демонстрация
См. этот вопрос/ответ по центру, но сохраняйте одинаковую высоту
3 — Вертикальный центр с использованием утилит отображения:
В Bootstrap 4 есть утилиты отображения, которые можно использовать для
display: table , display: table-cell , display: inline и т. д. .. Эти могут может использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячеек таблицы.
<дел>
<дел>
<дел>
Я центрирован по вертикали
Центр по вертикали с использованием Display Utils Демонстрация
Дополнительные примеры Изображение по центру по вертикали в
Центр по вертикали .row в .container Центр по вертикали и низ в
Вертикальный центр дочернего элемента внутри родителя Вертикальный центральный полноэкранный jumbotron
Важно! Я упоминал рост?
Помните, что вертикальное центрирование относительно высота родительского элемента . Если вы хотите центрировать всю страницу, в большинстве случаев это должен быть ваш CSS…
body,html {
высота: 100%;
}
Или используйте min-height: 100vh ( min-vh-100 в Bootstrap 4. 1+) для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенную высоту .
См. также: Вертикальное выравнивание в bootstrap 4 Bootstrap Center Вертикальное и горизонтальное выравнивание
Как центрировать элементы по вертикали в Divi — с CSS и без него
Вертикальное центрирование элементов, таких как модули, столбцы и строки, может создать гармоничный внешний вид вашего веб-сайта Divi.
Вот три различных метода вертикального центрирования элементов в Divi:
Вертикальное центрирование отдельных модулей (без CSS)
Вертикальное центрирование нескольких модулей в одном столбце (с CSS)
Вертикальное центрирование модулей в нескольких столбцах (с CSS) )
Поехали!
Подписаться на YouTube
Но почему бы просто не отрегулировать верхнее поле?
Как бы заманчиво не звучало это быстрое исправление, центрировать элементы по вертикали, играя с полями в Divi Visual Builder, не является надежным решением.
Причиной этого является фреймворк адаптивного дизайна . Одно значение верхнего поля, например 250 пикселей, может идеально смотреться на вашем конкретном экране . Но на экранах других размеров размеры элементов будут изменяться, чтобы соответствовать ширине области просмотра, а верхнее поле остается фиксированным. Нечеткий? Запись экрана ниже прояснит проблему.
Итак, давайте попробуем несколько трюков со 100% отзывчивостью, которые будут работать независимо от размера экрана вашего посетителя.
1. Вертикально центрировать отдельные модули (без пользовательского CSS)
До
По умолчанию модули выравниваются по вертикали вверху ряда.
После
Используя параметры положения в Divi Builder, мы можем центрировать текстовый модуль по вертикали без использования пользовательского CSS.
В этом примере у нас есть одна строка со столбцами. У нас есть высокое изображение в первом столбце (привет, красивая обезьянка!) и текстовый модуль во втором столбце.
Примечание: Этот метод будет работать только для вертикально центрированных одиночных модулей , так как несколько модулей в одном столбце будут перекрываться.
Центрирование элементов по вертикали с использованием абсолютного положения
Для вертикального центрирования меньшего объекта (текстового модуля) мы будем использовать параметры положения Divi Builder:
Откройте Настройки строки , нажав на шестеренку
Перейдите на вкладку «Конструктор»
Щелкните Размер и включите Выравнивание высоты столбцов 9004 6
Закройте Row settings и перейдите к Text Настройки модуля
Откройте вкладку Design
Откройте вкладку Advanced
Щелкните вкладку Position и установите для нее значение Absolute
Изменение положения планшета и мобильного устройства
Теперь два модуля расположены вертикально по центру рабочего стола. Теперь мы должны изменить настройки «Положение» для текстового модуля для мобильных устройств и планшетов, чтобы избежать перекрытия:
Наведите указатель мыши на область Абсолютное положение , чтобы отобразить дополнительные параметры
Щелкните значок смартфона , чтобы открыть настройки адаптивного дизайна
Щелкните значок планшета и измените положение от Абсолютное от до По умолчанию . По умолчанию настройки планшета будут унаследованы от настроек смартфона.
Сохраните и просмотрите во фронтальном режиме.
2. Вертикальное центрирование нескольких модулей в одном столбце
До
По умолчанию текстовый модуль и кнопка расположены вверху столбца
9 0279 После
С Фрагмент CSS ниже позволяет вертикально центрировать все модули в столбце.
Если у вас есть два или более модуля в меньшем столбце, нам нужно использовать некоторый пользовательский CSS для центрирования элементов по вертикали. В этом случае мы объединим Equal Height с margin:auto .
Центрирование элементов по вертикали с помощью margin:auto
Чтобы центрировать по вертикали меньшие объекты столбца (текстовый модуль и модуль кнопки), мы будем использовать параметры Divi Builder Position + фрагмент CSS.
Откройте Настройки строк , нажав на шестеренку
Перейдите на вкладку «Проект»
Нажмите Размер и включите Выравнивание высоты столбцов
Вернитесь к строкам Вкладка «Содержимое» и щелкните шестеренку для второго столбца .
Перейдите на вкладку «Дополнительно» и откройте вкладку «Пользовательский CSS».
Сохранить и просмотреть.
Это все. Никаких особых настроек для мобильных устройств в этом случае делать не нужно.
3. Модули по центру по вертикали в несколько столбцов
До
Отображение нескольких логотипов разных размеров в одном ряду может выглядеть беспорядочно.
После
Мы можем легко центрировать логотипы по вертикали, используя приведенный ниже фрагмент кода CSS.
Если у нас есть несколько столбцов в одной строке, использование margin:auto в каждом столбце занимает много времени. В этом примере у нас есть одна строка с четырьмя столбцами с одним модулем изображения в каждом столбце.
Центрирование элементов по вертикали с помощью align-items:center
Чтобы центрировать логотипы по вертикали, мы будем использовать Equalize Column Heights и align-items:center:
Откройте Row settings , щелкнув зубчатое колесо
Перейти к Вкладка «Дизайн»
Нажмите Размер и включите Выравнивание высоты столбцов
Вернитесь к строкам Вкладка «Содержимое»
Вставьте фрагмент ниже Элемент 9Поле 0005 для строки :
align-items:center;
Сохранить и просмотреть.
Настройки также будут унаследованы для мобильных устройств. В этом случае Divi отобразит два столбца рядом на планшете (которые также будут центрированы по вертикали). В мобильной версии вы не увидите никакой разницы, поскольку по умолчанию в каждой строке будет только один столбец.
На сегодня все!
Надеюсь, вам понравился этот пост. Подпишитесь на DiviMundo на YouTube и присоединяйтесь к нашей группе в Facebook, чтобы получать более свежие материалы о WordPress и веб-дизайне.
👉 Пост по теме: Как вертикально выровнять контент в Divi (от Elegant Themes)
👉 Бесплатный курс: Создайте сайт с нуля с помощью Divi
Партнерская ссылка
881 346 клиентов уже раскрыли настоящую потенциал WordPress. Загрузите Divi и начните создавать красивые веб-сайты уже сегодня.
ИССЛЕДУЙТЕ DIVI
Попробуйте сегодня и получите свои деньги обратно в течение 30 дней если вы не удовлетворены.
Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е.:html,тело) должна быть 100% ).
..содержимое карты...
row 
д. .. Эти могут может использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячеек таблицы.
1+) для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенную высоту .
Теперь мы должны изменить настройки «Положение» для текстового модуля для мобильных устройств и планшетов, чтобы избежать перекрытия:
