Вертикальное центрирование любого контента в Divi — Учебное пособие для Divi
Мне так часто задают вопрос, и на самом деле это очень просто, как центрировать контент по вертикали. Например, когда у вас есть текст рядом с изображением, но текст не заполняет все пространство, вы хотите, чтобы он располагался в вертикальном центре столбца, а не вверху.
Вы можете сделать это с отступом в некоторой степени, но это может испортить макет на небольших экранах, если вы не добавите несколько медиа-запросов, и, конечно, FireFox не всегда хорошо работает с процентами, которые вам нужно использовать для отзывчивости.
Добавление пользовательского класса CSS в вашу таблицу стилей означает, что вы можете вертикально центрировать любой контент за считанные секунды.
Итак, давайте готовить!
Ингредиенты
The Divi Theme от Elegant Themes
Время приготовления
Это займет у вас не более 3 минут.
Подготовка
Настроим раздел.
Добавьте новый стандартный раздел с указанием того, сколько столбцов вы хотите использовать для своего макета, в этом примере я использую четыре.
, затем откройте Настройки строк и в Advanced Settings Tab Set Высота колонны до Да . Затем Сохранить и выйти .
Метод
Теперь добавьте свои модули и контент в строку, вы можете использовать практически все. Вот грубый пример. Я использую модули изображений, текста, аннотаций и кнопок, и, как вы можете видеть, все содержимое выровнено по верхнему краю.
Далее вернитесь в свои Настройки строк и в Custom CSS TAB, добавьте класс DS-VERTICAL-ALIGN К каждую из CS-ALIGN-ALIGN КАЧЕСТВА CS-ALIGN-ALIGN .
полей, которые вы хотите центрировать по вертикали. Я добавил сюда все четыре столбца, но вам это не нужно, если вы не хотите. Затем Сохранить и выйти .
Теперь, что касается CSS, добавьте этот небольшой фрагмент в таблицу стилей дочерней темы, пользовательское поле CSS параметров Divi или поле CSS для конкретной страницы. Я бы посоветовал добавить это в таблицу стилей вашей дочерней темы, поэтому, когда вы захотите использовать ее снова, все, что вам нужно сделать, это добавить класс в соответствующие столбцы и включить выравнивание высоты столбцов в дополнительных настройках строки.
.ds-вертикальное выравнивание {
дисплей: гибкий;
flex-направление: столбец;
выравнивание содержимого: по центру;
}
Теперь ваш контент должен быть правильно выровнен по центру по вертикали, например:
Вот и все. Больше не нужно возиться с отступами и медиа-запросами, чтобы центрировать контент по вертикали!
Если вы нашли это полезным, пожалуйста, оставьте комментарий и подпишитесь на мою рассылку для всего моего последнего контента, связанного с Divi.