Je modules verticaal centreren binnen de kolommen

17 jun 2021 | CSS MUSTHAVE

Marloes met laptop blog
Standaard vul je kolommen van boven naar beneden met modules. Met marges en buffers kun je afstanden creëren, maar als je de inhoud precies in het midden wilt naast bijvoorbeeld een afbeelding dan is dit perfect!
modules-verticaal-centreren-binnen-kolom

Stap 1: Maak een Rij aan met de gewenste modules

Ik laat het in dit voorbeeld zien met een rij met 2 kolommen, maar dit werkt ook met méér dan 2 kolommen. Bijvoorbeeld handig in je footer!

Standaard staat alles bovenaan uitgelijnd. Je kunt natuurlijk de Tekstmodule aan de bovenkant een marge of buffer geven totdat hij in het midden staat, maar dit is dan op een kleiner of groter beeldscherm niet hetzelfde!

We gaan dus wat anders doen.

Stap 2: Ga naar de Rij instellingen -> Geavanceerd

Onder Aangepaste CSS -> Hoofdelement zet je de volgende CSS:

display: flex;
align-items: center;

LET OP! Deze code (het gedeelte display: flex;) zorgt er óók voor dat de kolommen naast elkaar worden gehouden. Verwijder de code dus bij mobiel en tablet als dat daar niet de bedoeling is!

Stap 3: Opslaan en klaar!

De modules staan nu mooi uitgelijnd in het verticale midden 😎. En dus ook op desktops/laptops met een andere schermresolutie!

Bedankt weer voor je aandacht en leuk als je laat weten wat je er van vond! 🤩

2 Reacties

  1. Caroline

    Super, leuk die tutorials. Heb een probleem: 2 kolommen, 1 kolom afbeelding en 1 kolom tekst. De kolom tekst staat stil lager dan de kolom afbeelding. Er staat niks raars in de buffer en marges. Heb het nu opgelost met een marge van -40px aan de bovenkant. Maar snap niet waarom Divi dit doet.

    Antwoord
    • Marloes

      Hoi Caroline! Dank :). En wat vreemd! Heeft je afbeelding misschien aan de bovenkant nog loze ruimte? Dus in het afbeeldingsbestand zelf? Dan zou je die nog kunnen bijsnijden. Zou ook niks anders kunnen bedenken dan idd, als alle marges en buffers op 0 staan. Heb je zowel gekeken in de module- als in de kolominstellingen?

      Antwoord

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd.

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!