Your text and/or 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 ways to align your content vertically in Divi including;
- CSS Flex and Auto Margin – equalize column heights column background colors will be lost
- CSS Flex Direction – equalize column heights column background colors will not be lost
- Use align-items CSS in the row to align all columns content vertically
Option 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.This adds the CSS flex property to the 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 you want to vertically align.
Option 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.This adds the CSS flex property to the 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 vertically align.
Option 2: Vertically aligning 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 all 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;
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 🙂