login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div Centreren in midden van pagina.

Offline JBke - 06/05/2007 16:16 (laatste wijziging 06/05/2007 22:20)
Avatar van JBkePHP gevorderde Hoi,

Ik had graag een div gecentreerd gezien in het midden van de pagina dus zowel horizontaal als verticaal.

Ik kan wel een div horizontaal centreren op 2 manieren.

manier 1:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .midden {
  2. 	position: absolute;
  3. 	width: 400px;
  4. 	margin-left: auto;
  5. 	margin-right: auto;
  6. }


en dan

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <p class="midden">
  2. <div align="center">


gebruiken

of

manier 2:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .midden {
  2. 	position: absolute;
  3. 	width: 400px;
  4. 	left: 50%;
  5.         margin-left: -200px;
  6. 	margin-right: auto;
  7. }

en dan

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="midden" align="center">


maar hoe kan ik dit realiseren voor verticale uitlijning? Dus dat de div steeds in het midden staat ook verticaal??

Alvast bedankt voor de hulp.

Citaat:
Siliecom14's edit:
Code tags, is het zo moeilijk dit te onthouden ??

9 antwoorden

Gesponsorde links
Offline jerone - 06/05/2007 16:19
Avatar van jerone JS gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. vertical-align: middle;
Offline JBke - 06/05/2007 16:25
Avatar van JBke PHP gevorderde @jerone: heb ik al geprobeerd werkt dus niet.
Offline radem205 - 06/05/2007 16:40
Avatar van radem205 Nieuw lid Je geeft al aan bij manier 2 dat het voor horizontaal kan. Voor verticaal geldt precies hetzelfde, dus:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .midden {
  2. position: absolute;
  3. width: 400px;
  4. height: 400px;
  5. top: 50%
  6. left: 50%;
  7. margin-left: -200px;
  8. margin-top: -200px;
  9. }


Zie ook: klik hier
Offline Rieny - 02/09/2008 17:11
Avatar van Rieny Nieuw lid vertical-align is volgens mij niet de goede naam, ik dacht dat dat valign heette, weet het niet zeker want ik script ook net 2 weken ofzo maar dacht dat ergens gelezen te hebben
Offline Kr4nKz1n - 02/09/2008 19:46
Avatar van Kr4nKz1n Onbekend Nee vertical-align is de juiste naam.

Hier heb ik laatst ook mee zitten ***ten 

Dit was de beste oplossing, en werd ook aangeraden door diverse site`s:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div#container
  2. 	{
  3. 		position: relative;
  4. 		left: 50%;
  5. 		width: 800px;
  6. 		margin: 0 0 0 -400px;
  7. 	}


Werkt in IE, FF en Safara
Offline GDeckers - 03/12/2010 20:18 (laatste wijziging 03/12/2010 20:53)
Avatar van GDeckers Lid Dit werkt 

php code - Bekijk de code zonder highlighting - Klap code in 
  1. position: absolute;
  2. left: 50%;
  3. top: 50%;
  4. width: 100px;
  5. height: 100px;
  6. margin-left: -50px; 
  7. margin-top: -50px; 
  8. background-color: green;


edit: Ik zie net dat deze manier hier boven ook al gebruikt is. Deze manier lijkt mij trouwens ook de beste..
Offline Kevin - 03/12/2010 23:24
Avatar van Kevin Crew Ajax/REST vertical-align is voor centreren binnen tabellen dacht ik?
Offline GDeckers - 04/12/2010 00:18
Avatar van GDeckers Lid @Kevin: Vertical-align wordt volgens mij gewoon weg niet veel gebruikt buiten tabellen, omdat het nogal vreemd is dit te gebruiken in een div ofzo.. of het moest om een geval zoals http://www.wpdf...ntre4.html zijn ofzo..

Kan hier wel fout zitten, maar dat was wat ik dacht :-). Komt niet veel voor, maar kan goed genoeg gebruikt worden!
Offline Koen - 04/12/2010 01:04
Avatar van Koen PHP expert Allemaal goed en wel, maar ik denk dat dit 3 jaar oude ( ) topic wel dicht kan.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.246s