Layout gecentreerd testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Losse content

Elementen centreren direct binnen een element met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="centered">
  <h1>Lorem ipsum</h1>
  <p>Dolor sit amet.</p>
</div>

section

Elementen centreren direct binnen een section met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<section class="centered">
  <h1>Lorem ipsum</h1>
  <p>Dolor sit amet.</p>
</section>

section met gegroepeerde content

div centreren binnen een section met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<section class="centered">
  <div>
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet.</p>
  </div>
</section>

article

Elementen centreren direct binnen een article met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<article class="centered">
  <h1>Lorem ipsum</h1>
  <p>Dolor sit amet.</p>
</article>

article met gegroepeerde content

div centreren binnen een article met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<article class="centered">
  <div>
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet.</p>
  </div>
</article>

div

Elementen centreren direct binnen een div met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="centered">
  <h1>Lorem ipsum</h1>
  <p>Dolor sit amet.</p>
</div>

div met gegroepeerde content

div centreren binnen een div met de class centered.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="centered">
  <div>
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet.</p>
  </div>
</div>

List-item - li

Visueel voorbeeld:

• Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML-voorbeeld:

<div class="centered">
  <div>
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet.</p>
  </div>
</div>