How to centre align text vertically in a column in Divi

Mar 8, 2019

It’s really simple to centre text horizontally in Divi just using the builder settings. However there’s no setting to vertically align the text within the column.

This can cause layouts to look messy, especially if you try to centre things using padding or margin.

This tutorial will walk you through how to do it with just a little bit of CSS.

There’s lots of different use-cases for this, but for this tutorial I’m going to create a 50-50 column with text on one side and an image on the other.

Checkout the demo here.

Step 1:
Add a section with 2 columns. In the design tab of the row setting, turn on “Equalise column heights”.

Step 2:
Add a text-box to the left-hand column, and add the text you’d like to use. For this example I’ve used a h2 and some body text.

Then in the advanced tab give it a custom CSS class of “centred-text”.

Step 3:
Add in image to the right-hand column.

Then save the layout!

Step 4:
Add the follow CSS to your custom CSS in your theme options.

.centred-text {
display: table;
height: 100%;
}

.centred-text .et_pb_text_inner {
display: table-cell;
vertical-align: middle;
}

Step 5:
Save and you’re done!

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

You can also checkout more Divi tutorials below.

Does your website pass the grunt test?