How to vertically align text & images in Divi

Vertically align text and images in Divi using custom CSS

Text and image content looks stylish when vertically aligned. The problem is that Divi does not make vertical alignment very easy – so we must use some custom CSS.

Follow us in this Divi tutorial as we show you how to vertically align your Divi content.

Method 1: Vertically align content in a row using Flex and auto-margin

  1. In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
  2. Add margin:auto; to the Advanced Tab of the row column that you would like to vertically align.

Method 2: Vertically align content in a row using CSS Flex direction

  1. In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
  2. Add display: flex; flex-direction: column; justify-content: center; to the Advanced Tab of the row column that you would like to vertically align.

Method 3: Vertically align content in the center of a column using CSS Flexbox

  1. In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
  2. Add align-self: center; to the Advanced Tab of the row column that you would like to vertically align.
Vertically Center Content in Divi
written by

David Wilkinson

Customer Support & Research Analyst

You have probably seen his name around but today we want to introduce David to you. We love your brain and the way it works, constantly ticking and analyzing how we can make processes better.

Check these out
2 Things you should change on every Divi site you build
How to Add a Secondary Menu to your Global Header in Divi using the Theme Builder
How to vertically align text & images in Divi
How to Add Dynamic Content to your Global Footer in Divi using the Theme Builder
How to Build a Custom Global Footer in Divi using the Theme Builder
How to Build a Custom Global Header in Divi using the Theme Builder
Make Divi Buttons not look like Divi Buttons with Global Styles and Divi Global Presets
How to un-Divify your Divi Sites Tutorial Series

1 Comment

  1. I like that this offers several methods, when most only offer method 1 as it’s by far the easiest and most common application.

    It might be worth mentioning that method 2 also works for individual lements in a layout used in an archive loop in Divi Machine. I wanted to vertically center titles, regardless of whether they wrapped onto more than 1 line. This is complicated using the single layout of course, but method 2 did the trick.

    I had to apply it in the Divi CSS rather than in the element itself, as the Post Title block defaults to H1, and I wanted it as H2, but it works beautifully with a custom class.

Submit a Comment

Explore more from Divi Engine

Divi Form Builder

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Divi Form Builder
Find out more
Divi Machine

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.      

Divi Machine
Find out more
Divi BodyCommerce

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.    

Divi BodyCommerce
Find out more
Divi Handoff

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Divi Handoff
Find out more
Divi Loop Extender

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Divi Loop Extender
Find out more
Divi Membership

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Divi Membership
Find out more
Divi Machine Accounts

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active

Divi Machine Accounts
Find out more
Divi Ajax Filter

Divi Ajax Filter

Filter WooCommerce, Posts & Custom Posts without reloading the page.    

Divi Ajax Filter
Find out more
Divi Mobile

Divi Mobile

Divi Mobile helps you create beautiful looking mobile menus without having to code.

Divi Mobile
Find out more
Divi Nitro

Divi Nitro

Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.

Divi Nitro
Find out more
Divi Protect

Divi Protect

Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!

Divi Protect
Find out more
Divi Mega Menu

Divi Mega Menu

Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.  

Divi Mega Menu
Find out more