For all the bells and whistles built into Divi, the one thing that it can’t do out of the box is to center the content of a column or row vertically. In this tutorial, I’m going to show you a super simple way to achieve this. There are two options, the one is to centre the content for specific columns in the row, the other is to centre all the columns at once.
The Examples
In the first example, I’m going to show you a row with random images of differing sizes that aren’t vertically aligned to each other. Excuse the ugly drop shadow, it’s just there to make the alignment more obvious.
Next is the same row but with the images vertically aligned.
Next up is another common scenario where you have a paragraph or two of text that you want to vertically align to an image. As you can see, in this example, the there’s no alignment.
Magna Aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis imperdiet massa tincidunt nunc pulvinar. Adipiscing at in tellus integer feugiat scelerisque varius.
And again, the same row but with the text vertically aligned to the image.
Magna Aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis imperdiet massa tincidunt nunc pulvinar. Adipiscing at in tellus integer feugiat scelerisque varius.
How To Do It For all Columns in a Row
There are essentially two steps to vertically align the contents of all the columns in a row.
Step One
The first step is to turn on Equalize Column Heights for the row in question. You’ll find this under the Design tab of the row, in the Sizing section.
Step Two
Once you’ve done step one, the second step is just as easy as the first. You simply navigate to the Advanced tab of the row in question and add the following CSS to the Main Element which you’ll find under Custom CSS.
How To Do It For Individual Columns
Again, there are essentially two steps to vertically align the contents of a specific column or columns. In this scenario, you might not want to center the content of all the rows.
Step One
Just as before, the first step is to turn on Equalize Column Heights for the row in question. You’ll find this under the Design tab of the row, in the Sizing section.
Step Two
Once you’ve done step one, the second step is just as easy as the first. You simply open the column in question and add the following CSS to the Main Element which you’ll find under Custom CSS which is under the Advanced tab.
Wrapping it Up
Well, that was easy, wasn’t it? So, if you want to vertically align all the columns of a row or just some of them, this is a super easy way to do just that.
Photo by Sven Mieke on Unsplash
