Horizontaal gecentreerd testpagina

div

Visueel voorbeeld:

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>

section

Visueel voorbeeld:

HTML-voorbeeld:

<section 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>
</section>

article

Visueel voorbeeld:

HTML-voorbeeld:

<article 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>
</article>

Formulier

Visueel voorbeeld:

HTML-voorbeeld:

<form class="background-color-offset horizontal-center">
<div>
<label for="example-div-name-1">User name</label>
<input type="text" id="example-div-name-1" />
</div>
<div>
<label for="example-div-password-1">Password</label>
<input type="password" id="example-div-password-1" />
</div>
<button type="submit">Lorem ipsum</button>
</form>