Maatwerk websites: webapplicaties, webshops, content management systems en oplossen website problemen.




Vertically center align text & modules in WordPress Divi theme – CSS tip

Categorie : Blog apr 26th, 2017

WordPress theme Divi is used a lot nowadays. It features a very user friendly page builder, and has many common functionalities built in. All responsive. It is weird though that one feature is missing: the ability to vertically center align text and other elements in their module / div. You can use the following steps to easily vertically center align modules anywhere in your WordPress / Divi website.

The text module at the right hand side is vertically center alligned.About the image: you can see the text module at the right hand side is vertically center alligned.

How to vertically center align text and other modules in Divi?

1. Add vertical center align class to css

Add the following css code to your custom css field or child theme style.css file.

.v-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

2. Equalize column heights

Go the the ‘Advanced design settings’ of the row, enabling the feature ‘Equalize column heights’. See the image below.

Can’t find it? Make sure you are editing the enclosing row, not the module itself.

Divi: equalize column heights in order to vertically center align modules

 

3. Add custom css to vertically center align

The final step is to add the CSS class defined in step 1 to the row. Adding the class is simple: go to the ‘Custom CSS’ tab, and add the class to the row.

Divi: add the custom CSS class to vertically center align modules in a row

Done!

Need help? I am an expert in WordPress, Divi and CSS.

DEEL :

(4) comments

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *