Verticale uitlijnen en centreren

U heeft geen lange content pagina en u wilt uw site netjes, zowel horizontaal als verticaal gecentreerd in elke webbrowser en ongeacht de bezoekers schermgrootte? Dat kan heel simpel met elke lay-out met de CSS display optie.

Howto: Vertical align a site to the center of the screen!

Dat is wel 1 van de meest gestelde vragen voor vele developers. Deze code is vaak niet achteraf in de HTML/CSS code in te bouwen en moet door de opdrachtgever van te voren worden doorgegeven. U heeft een single page website of niet elke pagina is zo lang dat er een scrollbar aan de zijkant komt. De optie om uw content in het midden van het scherm, zowel verticaal als horizontaal te plaatsen is dan erg mooi. Het enige nadeel dat de kunnen noemen, is dat het menu dan altijd van hoogte verspringt en dat de bezoeker niet snel met de muis op een vaste positie door de pagina’s kan klikken.
Wie wil de bezoeker snel de pagina’s laten zien? Nu hebben ze de tijd om alles te lezen!

U heeft een algemene div#container nodig om alles horizontaal te centreren en vervolgens daarbinnen in de div#content wordt de tekst geplaatst en wordt deze verticaal gecentreerd.

HTML

<div id="container">
    <div id="content">
        <p>Content tekst</p>
   </div>
</div>

CSS

* { margin: 0; padding: 0; }
html, body { height: 100%; }
#container {
	display: table;
	height: 100%;
	margin: 0 auto;
}
#content {
	display: table-cell;
	vertical-align: middle;
}

Mocht iets niet duidelijk zijn, dan horen we dit graag in onze reacties! Succes webdevelopers!

Gerelateerde blogposts:

• 6 mei 2010 -- De basis voor betere CSS coding, de shorthand methode
• 10 augustus 2011 -- Safari 5 introduceert Safari Extensions
• 27 mei 2011 -- Wat is de CSS Sprite afbeeldingen techniek?