Centering Div au milieu de la page

Okay J'ai enveloppé les divs dans un div. Pourquoi cela ne fonctionne-t-il pas?Centering Div au milieu de la page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>test.html</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      margin: 0px auto; 
     } 
     .testimonials_png 
     { 
      position: absolute; 
      left:20px; 
      top:397px; 
      width:220px; 
      height:395px; 
      background: url("test_files/testimonials.png") no-repeat; 
     } 
     .homeLink_png 
     { 
      position: absolute; 
      left:-1px; 
      top:243px; 
      width:203px; 
      height:75px; 
      background: url("test_files/homeLink.png") no-repeat; 
     } 
     .sidingLink_png 
     { 
      position: absolute; 
      left:202px; 
      top:243px; 
      width:180px; 
      height:75px; 
      background: url("test_files/sidingLink.png") no-repeat; 
     } 
     .windowsLink_png 
     { 
      position: absolute; 
      left:382px; 
      top:243px; 
      width:181px; 
      height:75px; 
      background: url("test_files/windowsLink.png") no-repeat; 
     } 
     .roofingLink_png 
     { 
      position: absolute; 
      left:563px; 
      top:243px; 
      width:183px; 
      height:75px; 
      background: url("test_files/roofingLink.png") no-repeat; 
     } 
     .aboutLink_png 
     { 
      position: absolute; 
      left:746px; 
      top:243px; 
      width:205px; 
      height:75px; 
      background: url("test_files/aboutLink.png") no-repeat; 
     } 
     .banner_png 
     { 
      position: absolute; 
      left:0px; 
      top:0px; 
      width:950px; 
      height:243px; 
      background: url("test_files/banner.png") no-repeat; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="wrapper"> 
    <div class="testimonials_png"> </div> 
    <div class="homeLink_png"> </div> 
    <div class="sidingLink_png"> </div> 
    <div class="windowsLink_png"> </div> 
    <div class="roofingLink_png"> </div> 
    <div class="aboutLink_png"> </div> 
    <div class="banner_png"> </div> 
    </div> 
    </body> 
</html>

Source

2010-05-30 shinjuo

La balise div est assis en dehors des autres divs. Pourquoi ne sont pas dans le conteneur div? – shinjuo

Pour le navigateur pouvoir du centre correcty une div, vous devez lui donner quelques informations sur ce div, alors:

.wrapper 
    { 
     margin: auto; 
    }

(copié à partir de votre code), il est mal, mais:

.wrapper 
    { 
     width:900px; 
     margin:0 auto; 
    }

fonctionne très bien! Vous dites au navigateur que votre enveloppe est 900px de largeur et le reste le navigateur doit se diviser également par le côté gauche et droit du wrapper ... Ainsi, margin: auto; ne vous fournira rien ... nécessite les spécifications de l'unité (pour le centrage, utilisez 0). Un autre problème dans votre code est le fait que vous avez le contenu de wrapper avec la position absolue, et qui sera rendu par le navigateur en tant qu'éléments en dehors de votre wrapper .. donc, c'est comme si votre wrapper n'est pas là , donc:

.wrapper 
    { 
     postion:absolute; 
     top:0; 
     left:50%; 
     width:900px; 
     margin-left:-450px; 
    }

Cela le navigateur que l'emballage est par une position absolue, qu'il est 0units de haut, et 50% de la fenêtre du navigateur de la gauche ... pour la centrer , retirez-le juste la moitié de la largeur donnée, donc -450px de marge-gauche. Maintenant, votre contenu doit être positionné sur: relative; être positionné relativement en ce qui concerne la position de l'emballage ...

OK, voici votre code (testé):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>test.html</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      position:absolute; 
      left:50%; 
      width:950px; 
      margin-left:-475px; 
     } 
     .testimonials_png 
     { 
      position: absolute; 
      left:20px; 
      top:397px; 
      width:220px; 
      height:395px; 
      background:green url("test_files/testimonials.png") no-repeat; 
     } 
     .homeLink_png 
     { 
      position: absolute; 
      left:-1px; 
      top:243px; 
      width:203px; 
      height:75px; 
      background:purple url("test_files/homeLink.png") no-repeat; 
     } 
     .sidingLink_png 
     { 
      position: absolute; 
      left:202px; 
      top:243px; 
      width:180px; 
      height:75px; 
      background:orange url("test_files/sidingLink.png") no-repeat; 
     } 
     .windowsLink_png 
     { 
      position: absolute; 
      left:382px; 
      top:243px; 
      width:181px; 
      height:75px; 
      background:yellow url("test_files/windowsLink.png") no-repeat; 
     } 
     .roofingLink_png 
     { 
      position: absolute; 
      left:563px; 
      top:243px; 
      width:183px; 
      height:75px; 
      background:blue url("test_files/roofingLink.png") no-repeat; 
     } 
     .aboutLink_png 
     { 
      position: absolute; 
      left:746px; 
      top:243px; 
      width:205px; 
      height:75px; 
      background:red url("test_files/aboutLink.png") no-repeat; 
     } 
     .banner_png 
     { 
      position: absolute; 
      left:0px; 
      top:0px; 
      width:950px; 
      height:243px; 
      background:pink url("test_files/banner.png") no-repeat; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="wrapper"> 
     <div class="testimonials_png"> </div> 
     <div class="homeLink_png"> </div> 
     <div class="sidingLink_png"> </div> 
     <div class="windowsLink_png"> </div> 
     <div class="roofingLink_png"> </div> 
     <div class="aboutLink_png"> </div> 
     <div class="banner_png"> </div> 
    </div> 
    </body> 
</html>

Source

2010-05-30 04:10:14 Zuul

Cela a fonctionné parfaitement pour moi: style = "position: absolute, top: 100px, left: 40%;". J'ai utilisé à gauche 40% puisque le contenu div occupera comme 20%. –

La meilleure façon de centrer une div est à l'OMI pour créer une enveloppe principale nommée div et attribuer une marge css: 0 auto; à cet élément.

Ainsi tout le contenu sera également centré de haut, gauche, droite, etc bas

Source

2010-05-30 03:54:03 RobertPitt

J'ai enveloppé les divs dans le code ci-dessus maintenant, mais il ne crée pas un conteneur autour des divs, pourquoi pas? – shinjuo

Centering Div au milieu de la page

Répondre

Questions connexes