Dit kan misschien als artikel worden toegevoegd ?
Ik ben heel lang op zoek geweest naar een oplossing voor het verticaal centreren van een website. Tijdens deze lijdensweg ben ik volgende knelpunten tegengekomen:
- 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
| Code: |
...
<body>
<div id="distance"></div>
<div id="container">
</div>
</body>
|
2. CSS
| Code: |
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: 150px;
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.
Voorbeelden:
-
www.webberig.com
-
www.mathieumaes.com/fw 
