Regelmatig komt de vraag langs hoe je ervoor kunt zorgen dat content in verschillende modules in een rij verticaal gecentreerd wordt. Bijvoorbeeld als je een afbeeldingsmodule en een tekstmodule naast elkaar wilt gebruiken, en de tekst niet de hele hoogte van de rij inneemt. Dan wil je eigenlijk dat de tekst verticaal (vanuit het midden) wordt gecentreerd. Natuurlijk kun je hiervoor padding toepassen, maar zodra je dan op een ander apparaat kijkt (mobiel of tablet) klopt het toch nét niet meer helemaal.

Met wat CSS code is dit simpel op te lossen.

Zo doen we dat:

Voeg een nieuwe standaard sectie toe met een aantal modules. In dit voorbeeld maak ik gebruik van 4 modules:

Open de rij module instellingen en in de tab Ontwerp maak je de kolomhoogten gelijk:

Vervolgens klik je op Opslaan en Verlaten.

Voeg nu je modules toe, bijvoorbeeld afwisselend een afbeelding en tekst:

Nu gaan we terug naar de rij instellingen en in de tab Geavanceerd voeg je de CSS klass ds-vertical-align toe aan elke kolom die je verticaal wilt centreren. Om zeker te zijn, kun je de klasse aan elke kolom toevoegen.

Daarna weer opslaan en verlaten.

Nu voegen we wat CSS code toe. Dat kan in je stylesheet, in de customizer extra css, in de thema opties extra css of in de pagina CSS bovenaan.

.ds-vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}

Nu is de inhoud van alle modules netjes verticaal gecentreerd:

Het origineel van deze les is  gemaakt door Michelle Nunan van DiviSoup. Zij heeft mij expliciet toestemming gegeven om de les te vertalen naar het Nederlands, om de Nederlandstalige Divigebruiker van dienst te zijn. Deze les en de inhoud mogen niet worden gekopieerd, of op andere wijze doorgegeven zonder toestemming van DiviSoup of DutchDivi