Posted By

Waldio on 12/06/10


Tagged

css2 centreren


Versions (?)

Centreren


 / Published in: CSS
 

URL: http://waldio.110mb.com/css/centeren.html

  1. /*
  2.  * Horizontaal
  3.  */
  4. #box {
  5. width: 200px; /* De width is verplicht */
  6. margin: 0 auto; /* De 0 staat voor de top margin en de auto zorgt er voor dat de overige pixels eerlijk tussen left en right worden verdeelt */
  7. }
  8.  
  9. /*
  10.  * Verticaal
  11.  */
  12. #box {
  13. width: 200px; /* Dit is niet nodig, wel handig */
  14. height: 200px; /* Dit is wel nodig om de top functie te gebruiken */
  15. position: absolute; /* We gaan top gebruiken, dus moeten we absolute/relatieve gebruiken */
  16. top: 50%; /* Dit is vanaf de rand van het element tot aan de rand van de pagina */
  17. margin-top: -100px; /* De helft van de height, dit is om de top bij het midden te krijgen */
  18. }
  19.  
  20. /*
  21.  * Verticaal en horizontaal
  22.  * Zelfde als verticaal, alleen dan nog met een left en width erbij
  23.  */
  24. #box {
  25. width: 200px;
  26. height: 200px;
  27. position: absolute;
  28. left: 50%;
  29. top: 50%;
  30. margin-left: -100px;
  31. margin-top: -100px;
  32. }

Report this snippet  

You need to login to post a comment.