Your text and image content in Divi will often look much better when it is vertically aligned.
There is no built-in option to vertically align content in Divi.
By using CSS you can make sure your content is aligned for any content height and is automatically adjusted for various screen sizes.
There are 3 main options to align your content vertically in Divi, which are;
- CSS Flex and Auto Margin – Equalizes column heights, but column background colors will be lost
- CSS Flex Direction – Equalizes column heights, and column background colors will not be lost
- Use align-items CSS in the row to align all columns’ content vertically
1. Vertically align Divi content using flex and auto-margin
- In your row settings Design tab, click on the Sizing section and set the Equalize Column Heights to yes. This will automatically add the CSS flex property to the whole row.
- In your row settings Content tab, select the column you wish to vertically align and click on the setting icon for that column.
- Open the column settings Advanced tab, then open the Custom CSS section and the following CSS into the Main Element CSS box.
margin:auto;
As you can see below, there are 3 columns with Equalize Column Heights and a background color set. I added the auto margin CSS into column 2 which now displays the text and button modules vertically aligned.
The column background color is no longer equalized for all 3 columns when using this method. If you want to maintain the column background colors on vertically aligned columns you can use the CSS Flex Direction method below.
You can add the same CSS code to each column that you want to apply the vertically align rule to.
2. Vertically align Divi 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. This will automatically add the CSS flex property to the whole row.
- In your row settings Content tab, select the column you wish to vertically align and click on the setting icon for that column.
- Open the column settings Advanced tab, then open the Custom CSS section and add the following CSS into the Main Element CSS box.
display: flex; flex-direction: column; justify-content: center;
As you can see below, there are 3 columns with Equalize Column Heights and a background color set. I added the CSS flex-direction into column 2 which now displays the text and button modules vertically aligned.
The column background color is still equalized for all 3 columns when using this method.
You can add the same CSS code to each column you want to apply the vertically align rule to.
3. Vertically aligning Divi content for all columns
The 2 methods above can be used to add the vertical alignment to any, or all, of the columns within your row by adding the CSS to each of the columns manually.
If you know you want all columns in a row to be vertically aligned it may be better to set them the CSS rules in 1 place.
To vertically center the content in all columns in a row you can add a single line of CSS into the rows’ advanced settings.
- In your row settings Advanced tab, click on the Custom CSS tab and add the following code;
align-items: center;
Watch the video below to see the vertical-aligned content in action
It works and is pretty easy to add. Thanks.
welcome 🙂
Thanks. Works for me.
welcome 🙂
Hi Craig. I’ve built a logo section on a site I’m re-designing. It’s two columns and I’ve tried all the alignment options you’ve given me yet it won’t align properly. Oddly enough, everything lines up properly when I’m in the Visual Builder but not once you save and view the site as you can see in the attached image. Here’s the staging site: http://staging4.gigtime.com/ Any idea as to what’s causing this?
it aligns for me as in the top image. maby a caching issue for you.
In between posting this and now, I found a fix and it’s aligned now. For anyone else that runs into this, I added this to the CSS:
#gallery-1 .gallery-item { margin: inherit; }
#gallery-1 img { display: block; }
Thanks for this article. 🙂
welcome 🙂
Thanks for the blog. How can an image be bottom aligned? (see windwos menu in 1. column in the second section: https://windows10professional.de/windows-10-kaufen). Justify-content does not accept the value bottom.
Other CSS properties we can use:
align-self: flex-start; – will align the second column content at the top
align-self: flex-end; – will align the second column content at the bottom
https://help.elegantthemes.com/en/articles/2679518-how-to-vertically-align-content-in-divi
THANK YOU !!! I’ve been searching everywhere for a solution that works for responsive web design and this saved my sanity.