Div volledig centreren

Info 
Door: jorennn Moeilijkheidsgraad: 2/3
Views:17.524Reacties: 1(Bekijken)
  Log in om zelf te reageren
 Waardering:5.7/10 (3 stemmen)



Eén van de moeilijke dingen in CSS is het volledig centreren van een div. Om dit te kunnen doen moeten we de div absoluut positioneren. Zo kunnen we de div plaatsen waar we willen, m.b.v. coördinaten. Dan geven we de div een hoogte/breedte en tenslotte ook zijn positie.

#Code
1
2
3
4
5
6
7
8
.container {
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
background-color:black; //kleurtje om de div goed te zien
}


Als je dit even probeerd zie je dat de div niet echt in het midden staat. Nu staat de div 50% weg van de bovenkant en 50% weg van de linker zijde. Als je goed kijkt kan je ook zien dat de linker bovenhoek in het midden staat van de pagina. Wat wij willen is dat de div in het middenstaat, en niet die hoek. Daarom gaan we de div met de helft van zijn lengte naar boven trekken, en met de helft van zijn breedte naar links. Zo dus.

#Code
1
2
3
4
5
6
7
8
9
10
.container {
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
background-color:black;
margin-left:-250px;
margin-top:-150px;
}


Nu staat de div volledig in het midden van je pagina. Let er wel op dat de margin-left steeds de helft is van de width en de dat de margin-top steeds de helft is van de height. Dan zou alles vlotjes moeten verlopen.

1 reactie
hearts-dsl Geplaatst op 08-04-2008 om 17:37
 

Regular
handige tutorial voor wanneer je je divs volledig wilt positioneren. heb het zelf regelmatig gebruikt maar persoonlijk kies ik toch liever voor het automatisch centreren.
het nadeel hiervan is namelijk als je je venster zou verkleinen, dat de website niet wordt verkleint omdat je er absolute waardes aan hebt gegeven.hier door kan het onoverzichtelijk worden en moet men horizontaal scrollen waar ik zelf liever niet voor kies

Pagina 1 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder