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>
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.