In order to vertically align in Divi, you are going to need to use a little bit of code as well as play with the settings of your section or rows.
Adding your code
First, you will need to add some code to the custom CSS section of your website. You can find this by going to your theme customizer. For instance, I am going to be demonstrating this in my TravelGuides demo.
Hover over your website title on the front end of your website, it will bring forth a drop-down – you can then click on the “Theme Customizer” option.
It will then open a new section similar to the below image.
You can then click on the “Aditional CSS” tab and paste code the following in:
.vmid {
display: flex;
flex-direction: column;
justify-content: center;
}
Once that is done you can click on Publish.
Alternatively, if you are in the dashboard section of your WordPress website, you can click on “Theme Options”
You can then scroll down to the following section and past the CSS in the ‘Custom CSS’ tab:
.vmid {
display: flex;
flex-direction: column;
justify-content: center;
}
You can then save changes 🙂
How to vertically center align your Divi row?
In order to make a Divi Row vertically center aligned, you will need to enter the Section (Blue) tab of your visual builder – click on advanced and add the CSS class “vmid”
How to vertically center align your Divi modules within a row.
First, you can enter your row settings – design and equalize column heights.
From there you need to go back to content – and enter one of the inner columns.
Then click on advanced – custom CSS and add in the class name (if you want your left column to align to the center of your right, you will add the class name to your left column and vise versa)
