Website centreren met CSS
De beste manier om je website te centreren is door gebruik te maken van Css. Om dit mogelijk te maken plaatsen we een div-tag. Deze div doet dienst als container, hierin staat dus de gehele inhoud van de pagina.
Deze div geven we een id met de naam "container", de Html-code ziet er als volgt uit:
.....
<body>
<div id="container">
Hier staat de inhoud van de pagina.
</div>
</body>
</html>
Het voordeel van een div t.o.v. een tabel is dat er veel minder Html-code nodig is, waardoor het ook wat overzichtelijker blijft.
De container div opmaken
Hieronder staan de opmaakcodes:
body {
text-align: center;
}
#container {
width: 760px;
margin: 0 auto;
text-align: left;
}
Nu zul je denken waarom wordt de tekst eerst gecentreerd in de <body>, we gebruiken toch een div? Het antwoord hierop is: omdat het anders niet werkt in Internet Explorer.
De totale breedte van de website / div staat op 760px, deze waarde kan jezelf veranderen naar een eigen waarde.
Met de Css-code, margin: 0 auto; zeggen we dat de marge aan de bovenkant en onderkant 0 pixels is en rechts en links automatisch wordt ingesteld, hiermee wordt dus de div gecentreerd.
Als laatste staat de tekstuitlijning op links, wil je het anders verander dan left door een andere waarde.
Let op!
Staat er commentaar in je Css-code gebruik dan /*commentaar*/ anders werkt het centreren niet meer.