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
- In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
- 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
- In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
- 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
- In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
- Add
align-self: center;to the Advanced Tab of the row column that you would like to vertically align.
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.
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.