Horizontaal gecentreerd

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de class horizontal-center toe op het horizontaal uit te lijnen element.

Voorbeelden

Horizontaal gecentreerd

Visueel voorbeeld:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

HTML-voorbeeld:

<div class="horizontal-center">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.</p>
</div>

HTML-structuur-voorbeeld:

--> 
<div class="horizontal-center">
  <!-- horizontaal uit te lijnen content -->
</div>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via NPM

CSS-voorbeeld:

@use "@minvws/manon/horizontal-center";

Instelbare variabelen

Beschikbare instelbare variabelen:
Variabele CSS-attribuut Manon ingestelde waarde Breekpunt Class
--horizontal-center-max-width max-width var(--body-text-small-max-width) - horizontal-center

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  --horizontal-center-max-width: ;
}