CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Uitlijning

CSS heeft verschillende eigenschappen die gebruikt kunnen worden om elementen op webpagina's uit te lijnen.
▲
◀ ►

CSS uitlijning zowel
horizontaal als verticaal


▼

CSS elementen centreren

Blokelementen (zoals een <div>) kun je makkelijk horizontaal centreren door gebruik te maken van margin: auto; Het instellen van de breedte van het element voorkomt dat het zich uitstrekt tot de randen van de container. Het element neemt dan de opgegeven breedte in beslag en de resterende ruimte wordt gelijk verdeeld.

Dit div-element is gecentreerd.

VoorbeeldVoorbeeld: 
.center {
  margin: auto;
  width: 60%;
  padding: 15px;
  border: 3px solid darkgreen;
}

Tip Het horiontaal centreren van een element heeft geen effect als de breedte (width) niet is opgegeven. In het bovenstaande voorbeeld is er een breedte van 60% opgegeven.

CSS centreren van tekst

Om tekst te kunnen centreren dien je gebruik te maken van de eigenschap text-align: center; zo kun je de tekst in een element centreren.

De tekst is gecentreerd.

VoorbeeldVoorbeeld: 
.center {
  text-align: center;
  padding: 15px;
  border: 3px solid darkgreen;
}

CSS centreren van afbeeldingen

Indien je een afbeelding wilt centreren, dien je eerst een blokelement van te maken, nadat je dit gedaan hebt stel je de linker en rechtermarge in op auto.

uitlijning

VoorbeeldVoorbeeld: 
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

CSS uitlijnen met position

Echter kun je elementen ook uitlijnen met de eigenschap position. Je kunt deze eigenschap gebruiken door de waarde absolute aan toe te voegen (position: absolute;).

Een absolute gepositioneerd element wordt gepositioneerd ten opzichte van het eerste bovenliggende element.

VoorbeeldVoorbeeld: 
.rechts {
  position: absolute;
  right: 0px;
  width: 250px;
  border: 3px solid darkgreen;
  padding: 15px;
}

Tip Absolute gepositioneerde elementen worden uit de normale flow verwijderd en kunnen andere elementen overlappen.

Meer informatie over posities kunt u hier vinden.

CSS uitlijnen met float

Een andere methode om elementen links of rechts uit te lijnen is door gebruik te maken van de eigenschap float. Je kunt dan de volgende waarden aan toe voegen (float: left; of float: right;).

VoorbeeldVoorbeeld: 
.rechts {
  float: right;
  width: 250px;
  border: 3px solid darkgreen;
  padding: 15px;
}

Meer informatie over de CSS eigenschap float kunt u hier vinden.

CSS clearfix hack

Als een zwevend (float) element groter is dan de elementen links of rechts ervan dan kan het voorkomen dat het niet goed wordt weergegeven.

Zonder Clearfix

mountain

Met Clearfix

mountain

Om dit probleem op te lossen kunnen we een clearfix-hack toevoegen, zie voorbeeld:

VoorbeeldVoorbeeld: 
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

CSS verticaal uitlijnen met padding

Er zijn verschillende manieren om een element verticaal te uitlijnen, een eenvoudige oplossing is het gebruik van de eigenschap padding. Hiermee kan je makkelijk de boven en onder ruimte van een element aanpassen.

Tekst is verticaal gecentreerd.

VoorbeeldVoorbeeld: 
.center {
  padding: 50px 0;
  border: 3px solid darkgreen;
}

Om zowel verticaal als horizontaal te centreren, kun je de eigenschap tekst-align: center; gebruiken.

Tekst is verticaal als horizontaal gecentreerd.

VoorbeeldVoorbeeld: 
.center {
  padding: 50px 0;
  border: 3px solid darkgreen;
  text-align: center;
}

Uitgebreide informatie over de CSS eigenschap padding kunt u hier vinden.
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.