login  Naam:   Wachtwoord: 
Registreer je!
 Forum

afbeelding centreren (Opgelost)

Offline chth - 12/11/2011 17:33
Avatar van chthLid hallo,

graag zou ik een afbeelding in het midden van een pagina hebben, maar dit wringt een beetje. de afbeelding heb ik in een div gezet en ik gebruik volgende css-code

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #afb {
  2. 	margin: auto;
  3. 	display: block;
  4.  
  5. }

8 antwoorden

Gesponsorde links
Offline pijke - 12/11/2011 19:59
Avatar van pijke Gouden medaille

Lid		 zou je de gehele broncode kunnen posten?
Offline chth - 12/11/2011 20:34
Avatar van chth Lid geen probleem.

dit is de html code
php code - Bekijk de code zonder highlighting - Klap code in 
  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=utf-8" />
  5. <link rel="stylesheet" type="text/css" href="layout.css" />
  6. <title></title>
  7. </head>
  8.  
  9. <body>
  10. <div id="afb"><img src="under-construction.jpg" alt="under construction" width="347" height="346" /></div>
  11. </body>
  12. </html>


met volgende css-code

php code - Bekijk de code zonder highlighting - Klap code in 
  1. html 	{
  2. 	height: 100%;
  3. 	width:100%;
  4. }
  5. body	{
  6. 	height: 100%;
  7. 	width:100%;
  8. 	padding: 0;
  9. 	margin: 0;
  10. }
  11. img	{
  12. 	padding: 0;
  13. 	margin: 10px;
  14. }
  15.  
  16. #afb {
  17. 	margin-top:auto;
  18. 	border:dotted;
  19. 	border-color:red;
  20. 	margin-left:auto;
  21. 	margin-right:auto;
  22. 	/*display: block;*/
  23. 	padding:0px;
  24. 	width: 367px;
  25. 	height: 366px;
  26. 	position:relative;
  27. }
Offline larssy1 - 12/11/2011 21:54 (laatste wijziging 12/11/2011 21:59)
Avatar van larssy1 MySQL beginner werkt normaal in Internet Explorer en Google Chrome.

http://www.unrealxs.com/beta/test
---
Voor zekerheid in Dreamweaver even gekeken, beide kanten hebben exact 632px ruimte bij mij 
Offline chth - 13/11/2011 08:50
Avatar van chth Lid inderdaad, horizontaal centreren is geen probleem. het is echter bij het verticaal centreren dat het niet lukt 
Offline icemar - 13/11/2011 09:31
Avatar van icemar Lid Met dit werkt het wel suc6 er mee

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  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">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. html     {
  7.     height: 100%;
  8.     width:100%;
  9. }
  10. body    {
  11.     height: 100%;
  12.     width:100%;
  13.     padding: 0;
  14.     margin: 0;
  15. }
  16. img    {
  17.     padding: 0;
  18.     margin: 10px;
  19. }
  20.  
  21. #afb {
  22.     border:dotted;
  23.     border-color:red;  
  24.     /*display: block;*/    
  25.     width: 368px;
  26.     height: 366px;
  27.     position:absolute;
  28.     top:50%;
  29.     margin-top:-183px;
  30.     left:50%;
  31.     margin-left:-184px;
  32. }
  33.  
  34.  
  37. </head>
  38.  
  40. <div id="afb">
  41.     <img src="http://www.aandeknoppen.org/blog/wp-content/uploads/2011/03/Under-Construction.gif" alt="under construction" width="347" height="346" />
  42. </div>
  43. </body>
  44. </html>
Bedankt door: chth
Offline chth - 13/11/2011 09:41
Avatar van chth Lid zeer tof, maar waarom die -183px en -184px?
Offline icemar - 13/11/2011 09:56
Avatar van icemar Lid dat is de helft afmeting van de afbeelding door deze negatief te zetten komt deze op de juiste plaats.
Anders zal dat niet mogelijk zijn zonder javascript te gebruiken.
Offline chth - 13/11/2011 11:35
Avatar van chth Lid owke, thanks ;)
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.225s