Tekst exact uitlijnen op elk niveau (blok, container, rij, kolom, element)

Samenvatting

Tekstuitlijning lijkt vaak “stuk”, terwijl de editor precies doet wat je eerder hebt ingesteld op een ander niveau. In Mach3Blocks ontstaat uitlijning door samenspel van meerdere lagen: Blok, Container, Rij, Kolom en Element. Dit artikel leert je hoe je uitlijnproblemen systematisch oplost: eerst oorzaak vinden, dan gericht aanpassen, en daarna valideren per apparaat.

Wanneer gebruik je dit?

Gebruik dit artikel wanneer:

koppen en alinea’s niet in lijn staan met knoppen of afbeeldingen;
centreren op desktop werkt maar op mobiel “verspringt”;
tekst op verschillende pagina’s inconsistent lijkt ondanks hetzelfde thema;
je team steeds ad-hoc tweaks doet zonder stabiel resultaat.

Hoe werkt dit in Mach3Blocks?

Uitlijning ontstaat uit twee verschillende dingen die makkelijk verward worden:

Tekstuitlijning (de optie Uitlijning: links / midden / rechts / uitvullen) bepaalt hoe de tekst binnen een element ligt. Belangrijk: deze instelling erft door — zet je hem op een hoger niveau, dan volgen de elementen eronder mee, tenzij je ze apart instelt.
Uitlijning van het hele element in zijn kolom of rij regel je met Uitlijning horizontaal en Uitlijning verticaal (op layoutniveau). Een tekst kan dus keurig links staan (tekstuitlijning) en tóch gecentreerd ogen, doordat het hele element in een smalle, gecentreerde kolom zit.

Daarom loop je bij een uitlijnprobleem deze volgorde na:

layoutniveau (blok → container → rij → kolom): hoe ligt het element in zijn kolom, en hoe breed is die kolom?
elementniveau: de tekstuitlijning van het element zelf.
per schermformaat: is er een afwijkende instelling op mobiel of tablet?

Draai je dit om, dan blijf je symptomen patchen.

--alert variant:warning title:"Belangrijk"--
Exacte uitlijning krijg je alleen als je per niveau controleert. Eén foutieve override op kolomniveau kan alle elementinstellingen visueel 'ongeldig' laten lijken.
--/alert--

Welke rechten heb je nodig?

Je past opmaak aan, dus je hebt het recht Websites/presentaties stijlen nodig. Zie je de opmaak-opties niet of kun je niet opslaan, dan ontbreekt dat recht.

Waar klik je precies?

Volg deze route zonder stappen over te slaan:

Open de pagina in de editor.
Zet de weergave eerst op Desktop (bovenste toolbar).
Selecteer de tekst die niet goed uitgelijnd lijkt.
Open rechts Opmaak.
Controleer onderin via elementselectie of je op Element staat.
Noteer huidige uitlijning (links/midden/rechts/justified).
Klik daarna in de elementselectie terug naar Kolom en controleer breedte/uitlijning/spacing.
Doe hetzelfde voor Rij en Container.
Pas alleen het niveau aan waar de afwijking ontstaat.
Herhaal Desktop → Tablet → Mobiel.

Supportflow (symptoom → diagnose → actie → verwacht resultaat)

Symptoom 1: “Titel staat links, maar knop eronder lijkt gecentreerd”

Diagnose

Titel en knop zitten in verschillende kolommen, of hebben verschillende breedte/spacing op kolomniveau.
Of knop heeft eigen element-uitlijning die afwijkt van tekst.

Actie

Selecteer titel en knop afzonderlijk.
Vergelijk per element uitlijning en breedte.
Selecteer beide bovenliggende kolommen en vergelijk kolominstellingen.
Trek uitlijning op hetzelfde niveau gelijk (bij voorkeur eerst kolomstructuur, daarna elementfinetuning).

Verwacht resultaat

Titel en knop volgen dezelfde visuele as.
Geen “optisch scheef” effect meer in desktopweergave.

Symptoom 2: “Centreren werkt op desktop, maar mobiel springt tekst naar links”

Diagnose

Mobiel breakpoint heeft eigen override voor uitlijning of kolombreedte.
Of margin/padding op mobiel verschuift de tekst visueel.

Actie

Schakel naar mobiel (telefoon staand).
Controleer elementuitlijning specifiek voor mobiel.
Controleer kolom- en container spacing op mobiel.
Corrigeer alleen de mobiele override waar nodig.
Verifieer dat desktopinstellingen ongemoeid blijven.

Verwacht resultaat

Tekst blijft op mobiel bewust gecentreerd of bewust links, zonder onverwachte sprong.
Desktop blijft stabiel.

--alert variant:info title:"Pro tip"--
Werk van buiten naar binnen (Container → Rij → Kolom → Element). Dat scheelt veel trial-and-error en voorkomt dat je dezelfde fout op meerdere plekken introduceert.
--/alert--

Praktijkvoorbeelden (realistisch, before/after)

Voorbeeld 1 — Heroblok met titel en CTA

Before

Titel staat visueel 20–30px “anders” dan de CTA-knop.
Team denkt dat alleen tekstuitlijning fout is.

Ingreep

Op elementniveau bleek titel al correct links uitgelijnd.
Op kolomniveau had CTA extra linkerpadding.
Padding gelijkgetrokken en spacing opnieuw getest per breakpoint.

After

Titel en CTA lopen weer in één lijn.
Geen extra compensatie-hacks meer nodig.

Voorbeeld 2 — Driekolomsblok op desktop, stapelend op mobiel