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! 🤩

4 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
  2. Debbie

    Hoi Loes, bedankt voor de tutorial! Ziet er strak uit, alleen lukt het me niet om de code voor mobiel en tablet te verwijderen. De code is in de instellingen voor deze devices grijs in plaats van gekleurd en ik kan de code dus niet deleten. Via een andere weg lukt het wél maar dan verdwijnt de code óók voor desktop/ laptop. Wat doe ik verkeerd?

    Antwoord
    • Marloes

      Hi Debbie! Klopt, het werkt idd niet met delete als ze grijs zijn, maar als je erin klikt en je drukt op spatie dan gaat het weg :). Succes!

      Antwoord

Een reactie versturen

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

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!