This is so easy it’s ridiculous! All it takes is a tiny bit of code added to the CCS main Divi Style sheet.

To vertically centre a text module in a column

Add the following to the CSS Divi style sheet.

/** CENTRED CONTENT IN COLUMNS **/
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}

And then the quick flick of a switch in the Row settings
Design > Sizing > Equalize Columns Heights

To vertically centre modules in a row

To centre modules in a Divi row read the article from Elegant Themes How To Vertically Align Content.
This shows you how to add the following CSS to the Advanced section in the row instead of editing the overall site CSS.

With the Equalise switch active in the Design settings now go to the Advanced tab settings for the same row and add the following css snippet under the Main Element input box for all columns or specific columns.

margin: auto;

That’s it. You’re all done : )

To equalise the height of the modules in a row

With the Equalise switch active in the Design settings the column rows need to be coloured NOT the module.

We used centred content on the following sites:

Total Health

We used equalise content on the following sites:

UProtectNZ

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This