Hoe kan ik mijn inhoud horizontaal en verticaal centreren via CSS?

Trefwoorden: CSS, DIV, inhoud centreren

1. Inleiding


Horizontaal en verticaal centreren is relatief eenvoudig te bereiken indien je gebruik maakt van tabellen. Tabellen zijn echter nooit bedoeld geweest om lay-out mee samen te stellen, maar eerder voor het overzichtelijk weergeven van gegevens. Het is mogelijk om, via CSS, een element hetzelfde gedrag te geven als een cel in een tabel, maar deze techniek werkt niet in elke browser even goed.

In dit artikel bespreken we een eenvoudige manier om gegevens (tekst, afbeeldingen et cetera) snel zowel horizontaal als verticaal te centreren, ongeacht de afmetingen van het browservenster bij de bezoeker.

2. Werkwijze


Bij wijze van een eenvoudig voorbeeld zullen we twee paragrafen met elk een drietal zinnen centreren over de paginabreedte en-hoogte.

2.1. Inhoud van de pagina

Volgende code is de basis waarvan we zullen vertrekken:

CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Multidesk.be - inhoud horizontaal en verticaal centreren</title>
  6. </head>
  7. <body>
  8. <div id="inhoud">
  9.         <p>
  10.                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  11.                 Praesent vitae purus duis tincidunt felis quis diam.
  12.                 Vivamus ante nisi, tristique id, facilisis semper, convallis vitae, erat.
  13.         </p>
  14.         <p>
  15.                 Cras ultrices, dui non adipiscing dignissim, ipsum arcu lobortis augue, vitae mattis leo nisi at tellus.
  16.                 Donec suscipit dui ac tellus.
  17.                 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
  18.         </p>
  19. </div>
  20. </body>
  21. </html>


2.2. Inhoud opmaken

Om één en ander duidelijk zichtbaar te maken, plaatsen we de inhoud in een container (inhoud) met een breedte van 500 pixels en een hoogte van 200 pixels. We geven de container ook een groene achtergrondkleur en een gele rand om deze duidelijk af te lijnen. Dit doen we met behulp van onderstaande stylesheet.

CODE
  1. #inhoud {
  2.         width:500px;
  3.         height:200px;
  4.         background-color:#006633;
  5.         border:1px solid #ffff00;
  6. }


2.3. Horizontaal centreren

Horizontaal centreren vergt het minste code, ten opzichte van verticaal centreren. Het enige wat we moeten doen, is aangeven dat de container (en dus ook de tekst erin) in het midden moet komen te staan. Dit kan door de regel margin:auto toe te voegen aan onze stylesheet zodat we onderstaande code bekomen.

CODE
  1. #inhoud {
  2.         width:500px;
  3.         height:200px;
  4.         background-color:#006633;
  5.         border:1px solid #ffff00;
  6.         margin:auto;
  7. }


Indien je je inhoud enkel horizontaal wenst te centreren, volstaat deze code dus.

2.4. Horizontaal en verticaal centreren

Verticaal centreren vergt ietje meer typwerk. In tegenstelling tot horizontale centralisatie kunnen we inhoud niet verticaal centreren door de browser de marges te laten bepalen via margin. We weten echter ook niet hoeveel pixels onze container precies van de bovenkant van het browser venster staat, aangezien we niet kunnen bepalen (via HTML) hoe groot het browservenster van de bezoeker is. De oplossing voor dit probleem, ligt in het werken met percentages. Door onze container absoluut te positioneren, kunnen we aangeven dat deze in de helft van ons browservenster moet komen te staan (50% van de bovenkant). Absolute positionering betekent echter dat onze margin:auto;, die we gebruiken voor horizontaal te centreren, niet meer zal functioneren. Dit vangen we echter op door aan te geven dat onze container ook 50% van de zijkant moet komen te staan. We verwijderen de regel margin:auto; uit onze code en voegen de code voor absolute positionering en marges van de boven- en zijkant toe. We bekomen onderstaand resultaat in onze stylesheet.

CODE
  1. #inhoud {
  2.         width:500px;
  3.         height:200px;
  4.         background-color:#006633;
  5.         border:1px solid #ffff00;
  6.         position:absolute;
  7.         top:50%;
  8.         left:50%;
  9. }


Wanneer je de bovenstaande code uittest, zal je merken dat de inhoud inderdaad niet meer in de linkerbovenhoek van je venster staat. Gecentreerd is deze echter ook niet. Dit komt omdat we bij onze container wel aangeven dat deze in het midden moet komen staan, maar we echter geen rekening gehouden hebben dat onze browser begint te rekenen vanaf de linker- en bovenkant van onze container. Beter zou zijn als de browser rekent vanaf het midden van de linker- en bovenkant.

Om dit te bereiken, geven we de container een marge mee. De linkermarge is exact de helft van de breedte van onze container, terwijl de bovenmarge exact de helft van de hoogte is. Omdat we de afstand moeten aftrekken van de procentuele breedte, plaatsen we er een minteken voor; zoals je kan merken in onderstaande stylesheet.

CODE
  1. #inhoud {
  2.         width:500px;
  3.         height:200px;
  4.         background-color:#006633;
  5.         border:1px solid #ffff00;
  6.         position:absolute;
  7.         top:50%;
  8.         left:50%;
  9.         margin-left: -250px;
  10.         margin-top: -100px;
  11. }


Wanneer je de afmetingen van je browser venster wijzigt, zal je merken dat onze container zich automatisch opnieuw centreert. Dit maakt het centreren van objecten, ongeacht het formaat van het venster, enorm eenvoudig!

3. Slot


Om de hierboven beschreven techniek te verduidelijken, demonstreren we deze nogmaals met een ander voorbeeld. Deze keer geven we onze inhoud een breedte van 200 pixels en een hoogte van 300 pixels. Onze stylesheet wijzigt bijgevolg ook, zoals je hieronder kan zien.

CODE
  1. #inhoud {
  2.         width:200px;
  3.         height:300px;
  4.         background-color:#006633;
  5.         border:1px solid #ffff00;
  6.         position:absolute;
  7.         top:50%;
  8.         left:50%;
  9.         margin-left: -100px;
  10.         margin-top: -150px;
  11. }


Indien je nog vragen zou hebben over deze techniek of problemen zou kennen bij de implementatie ervan, kan je deze steeds plaatsen op onze Forums.Dit artikel werd geschreven door Martijn op donderdag 21 december 2006 om 19:20 en werd sindsdien 9517 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door een gast op zaterdag 29 oktober 2011 om 12:59:33.
Hey,

ik heb een ander probleempje.

ik probeer een navigatiebalk te plaatsen op mijn pagina.En dat is gelukt maar die navigatiebalk moet op 3 pagina's komen dat heb ik ook gedaan en ze zijn allemaal gelinkt met dezelfde CSS file.

En toch staan ze niet helemaal op dezelfde plaats vb: op pagina 1 staat hem juist en op pagina 2 staat dat zo een halve cm meer naar links en vb pagina 3 staat dan weer een halve cm naar boven.

weet jij hoe ik dit kan oplossen?

mvg.
  • Pagina
  • 1 van 1