Home Ontwerp je site CSS Verticaal centreren in CSS
Verticaal centreren in CSS

Het verticaal centreren van een website is niet vanzelfsprekend. In dit artikel vind je een oplossing die gebruik maakt van CSS.

Op zoek naar een oplossing voor het verticaal centreren van een website kom je al snel de volgende knelpunten tegen :

  • Niet crossbrowser compatibel
  • Niet valideerbaar volgens w3c
  • Gebruik van tabel voor layout (waar ik principieel tegen ben)

Uiteindelijk heb ik deze oplossing gevonden, die ik graag met jullie deel.

Waarom verticaal centreren ?

Dit kan nuttig zijn voor websites die weinig inhoudelijke tekst moeten hebben, en waarbij de hoogte statisch kan zijn. Denk bv. aan een flyer-achtige webpagina die een evenement aankondigt, een pagina met een "under construction" kadertje, enz...

Het kan ook nuttig zijn in webapplicaties, voor bv. het tonen van een login scherm, foutmeldingen, etc...

1. HTML

We maken 2 divs aan. Eén "distance" div waarvan de functie later duidelijk zal worden, en een "container" waarin de inhoud van de pagina moet komen.

Om deze methode te kunnen gebruiken, moet de website een vaste hoogte hebben, die je kan bepalen in de div

...
<body>
<div id="distance"></div>
<div id="container">

</div>
</body>

2. CSS


html,body
{
height:100%;
margin: 0px;
padding: 0px;
}

#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* helft van de website hoogte */
float:left;
}

div#container
{
text-align:left;
margin:0 auto; /* Ook horizontaal centreren */
position: relative;
width:330px;
height: 600px;
clear: left;
}

Mensen die al wat kennis hebben van CSS zullen ongeveer begrijpen wat hier gebeurt. Ik tracht het stapsgewijs uit te leggen:

  1. We geven de body een 100% hoogte. Dit is nodig om 50% height te gebruiken in de "distance" div.
  2. De "container" div krijgt een vaste hoogte en breedte.
  3. De "distance" div hoort leeg te zijn en krijgt een 50% hoogte en 1px breedte. Daarbovenop geven we een negatieve marge, om precies te zijn de helft van de hoogte van de website.

Voorbeeld:

http://www.mathieumaes.com/fw

Auteur : Mathieu


 
7 + 9 =
 

Verdien meer met je website