login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div centreren (Opgelost)

Offline Kiekefreak - 13/06/2010 11:46 (laatste wijziging 13/06/2010 11:47)
Avatar van KiekefreakNieuw lid Dag allemaal,

Ik ben een site aan het maken en ik wil dat de container in het midden van de pagina staat. (de container is bijvoorbeeld 800x400px groot)

Het lukte me wel om de container horizontaal te centreren ...
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div.container {
  2.    margin-left:auto;
  3.    margin-right:auto;
  4. }


Maar ik weet niet hoe ik de container verticaal kan centreren. Niet alle schermen zijn even groot, en ik wil niet dat er scrollbars verschijnen...

Weet iemand een oplossing?
Alvast bedankt,
Kiekefreak

3 antwoorden

Gesponsorde links
Offline Martijn - 13/06/2010 12:36
Avatar van Martijn Crew PHP je kunt voor horizontaal ook dit doen, is wat korter: "margin: 0 auto;"

op je vraag: http://phrogz.net/css/vertical-align/index.html en dan een stukje naar beneden scrollen
Offline WouterJ - 13/06/2010 12:40
Avatar van WouterJ HTML gevorderde Je kan het ook doormiddel van dit centeren: http://d-graff.de/fricca/center.html

Is een betere versie op deze code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2. height: 200px;
  3. width: 200px;
  4. position: absolute;
  5. top: 50%;
  6. left: 50&;
  7. margin-left: -100px; /* helft van width */
  8. margin-right: -100px; /* helft van height */
  9. }

Dit kan je ook gebruiken, maar dan valt bij een klein scherm de linkerbovenhoek weg.
Bedankt door: Kiekefreak
Offline Kiekefreak - 13/06/2010 22:25 (laatste wijziging 13/06/2010 22:25)
Avatar van Kiekefreak Nieuw lid Bedankt Waldio,

Het werkt perfect, maar er stond een foutje (r8) in je code denk ik ...

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2. height: 200px;
  3. width: 200px;
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. margin-left: -100px; /* helft van width */
  8. margin-top: -100px; /* helft van height */
  9. }


Bedankt!
Kiekefreak
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s