Titel afbeelding - Verticaal centreren in Divi

Verticaal centreren in Divi

door Maarten Hogeveen | 11 juni 2020

Inleiding

Raakt u ook weleens gefrustreerd doordat er geen optie is in Divi om elementen verticaal te centreren? Als u hier ja op heeft geantwoord, bent u op de juiste plek! In deze blog ga ik een simpele truc uitleggen om elementen verticaal te centeren. Deze truc maakt gebruikt van de aangepaste CSS velden in Divi (lees hier meer over Aangepaste CSS in Divi) en CSS flexbox.

Hieronder krijgt u een korte uitleg over CSS flexbox, een handige lijst van waar u de CSS moet toepassen voor welk gewenst effect, en tot slot een voorbeeld.

Wat is CSS flexbox?

Flexbox is een manier om met CSS responsieve layouts te ontwikkelen. In tegenstelling tot CSS grid waarmee een rigide structuur van rijen en kolommen wordt opgezet, is flexbox erop gericht elementen te laten groeien en krimpen aan de hand van hun inhoud.

Ik zal een aantal componenten van flexbox uitleggen, maar voor een volledigere uitleg raad ik dit artikel aan van CSS Tricks.

LET OP! Het is bij flexbox belangrijk om te onthouden dat het ouder element het gedrag van de kinder elementen beïnvloedt.

In Divi kunt u de volgende regels hanteren:

  • Om een module te centreren, dient de kolom waarin de module zich bevindt een flexbox te zijn.
  • Om een kolom te centreren, dient de rij waarin de kolom zich bevindt een flexbox te zijn.
  • Om een rij te centreren, dient de sectie waarin de rij zich bevindt een flexbox te zijn.

Om van een element een flexbox (Flexible Box) te maken moet dat element de display: flex; stijl krijgen. Daarna kunt u met een aantal extra stijlen de layout van de elementen binnen de flexbox naar wens laten gedragen.

Met flex-direction: row; of flex-direction: column; kunt u de richting kiezen waarop de elementen in de flexbox zich opstellen. Met de row waarde zullen de elementen zich in horizontale richting opstellen, terwijl ze zich in de verticale richting zullen opstellen met de column waarde. Om dit artikel kort en overzichtelijk te houden, zal alleen de row behandeld worden.

Met align-items: center; kunt u de elementen die in de flexbox zitten verticaal centreren. Align-items werkt anders voor flex-direction: row of column. Dit is iets om rekening mee te houden!

Deze drie onderdelen van flexbox CSS stelt u in staat om elementen verticaal te centeren in hun ‘ouder’ element (de flexbox). Hieronder zal een voorbeeld behandeld worden om u een duidelijker beeld te geven van deze toepassing van flexbox.

Hoe werkt verticaal centreren met flexbox in de praktijk?

Module 1

Module 2

Hierboven ziet u een voorbeel van twee modules in een rij die niet verticaal gecentrereerd zijn. Hier gaan we verandering in brengen. Zoals eerder besproken gaan we om modules te centreren van de rij een flexbox maken. Daarvoor ga ik de rij een stijl van display: flex; geven. Dit doe je in de aangepast CSS sectie van de rij onder het ‘hoofd element’ kopje.

Daarnaast geven we de rij ook de align-items: center; stijl, waardoor de modules in de rij verticaal gecentreerd worden.

Het resultaat ziet u hieronder.

Module 1

Module 2

En voilá uw modules zijn gecentreerd! Hopelijk heeft dit u wat inzicht gegeven in hoe makkelijk het is om de inhoud van uw website te centreren met behulp van flexbox en een klein beetje aangepaste CSS.

Heel veel succes met het prachtig maken van uw website, en mocht u geïnteresseerd zijn in nog meer van dit soort trucs laat het me weten via mail of social media!