Centreren van elementen.

Bron: http://www.sceneone.nl/positionering/centreren.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Nu we de belangrijkste mogelijkheden van het positioneren van elementen op een pagina doorgenomen hebben (ik ga er voor het gemak vanuit dat je de voorgaande onderdelen van dit hoofdstuk doorgeworsteld hebt) wordt het leuk.
Het wordt leuk omdat je de verschillende css eigenschappen met elkaar kunt gaan combineren om ze vervolgens los te laten op de elementen in je pagina, bijvoorbeeld om deze te centreren.

Als je een hele website wilt centreren (zoals deze website) dan werk je het beste met een alles omvattende box. Laten we deze box 'main_container' noemen.
De main_container heeft maar één functie: het centreren van je website en dat werkt als volgt:

CSS: body{
margin: 0;
text-align: center;
}

div#main_container{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box2{
background-color: red;
float: left;
width: 15%;
height: 200px;
}

div#box3{
background-color: green;
float: left;
width: 70%;
height: 200px;
}

div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
}
HTML: <div id="main_container">

<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>

</div>

bekijk het resultaat

Wat er gebeurd is in feite niet zo ingewikkeld.
Je begint met in de body de text-align op center te zetten. Daarmee wordt alles wat in de body komt gecentreerd.
Vervolgens laat je de main_container zijn linker- en rechter margin zelf bepalen door deze marges de waarde 'auto' te geven. Dat is eigenlijk alles.
Wat je niet moet vergeten is de text-align van de main_container weer op 'left' te zetten zodat alles wat ín main_container komt weer gewoon links uitlijnt.

En het mooie van het hele verhaal is...........
Natuurlijk! De html code die nodig is om dit alles voor elkaar te krijgen. Er staat zowat niets in je html, een paar regeltjes:

<div id="main_container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>

That's all............ain't life sweet.

naar het begin van de pagina