login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div overal gecentreerd (Opgelost)

Offline MenM - 02/05/2008 14:27
Avatar van MenMNieuw lid Ik heb een pagina waar 1 div van 500x750px komt op te staan. Nu wil ik dat deze div op ELK scherm mooi in het midden staat.

Hoe moet ik dit doen?

2 antwoorden

Gesponsorde links
Offline michel3vb - 06/05/2008 10:44 (laatste wijziging 06/05/2008 10:45)
Avatar van michel3vb Nieuw lid je kan het als volgt doen:

gebruik dit stukje css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body 	{
  2. 			text-align:center;
  3. 			}	
  4.  
  5. div#box 	{	
  6. 			width: 500px;
  7. 			height: 750px;
  8. 			text-align:left;
  9. 			background: #FF0000;
  10. 		}


en het volgende stukje html:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <link href="test.css" rel="stylesheet" type="text/css">
  4. </head>
  5.  
  7. 	<div id="box">
  8. 	test
  9. 	</div>
  10. </body>
  11. </html>


en het werkt!
Offline StommePoes - 09/05/2008 09:58 (laatste wijziging 09/05/2008 10:00)
Avatar van StommePoes Nieuw lid Ja en nee, michel. text-align: center lukt voor heel oude IE (5.5 en lager) of ook in IE die in Quirks Mode zit (als er geen Doctype op de pagina is, of, als er iets, zoals een spaatie of <?xml text of <!--comment text is voor de doctype, dat is ook slecht voor IE), maar om een block zoals een div te centeren in ALLE browsers, gebruik je zo:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2.   text-align: center; /*alleen voor gebruikers van IE5.5 en lager*/
  3. }
  4. #box {
  5.   text-align: left; /*undo voor IE5.5 zodat text niet centered is*/
  6.   width: 500px;
  7.   height: 750px;
  8.   margin: 0 auto; <--hier is ie
  9. }


Maar, dit is alleen voor horizontaal centeren. CSS werkt niet wel met verticaal centeren, meestal moet je het doen met een tweede container of div, zoals Paul O'B doet...
http://www.pmob.co.uk/temp/vertical-align11.htm

een trukje en ook iets bijzonder voor onze domme vriend IE6... : )
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.325s