marge: l'auto ne se centre pas

Dans le style suivant à partir du site web: http://6.470.scripts.mit.edu/css_exercises/exercise4.html

<style type="text/css">
  #sponsors {
         margin:auto;
         margin-top:50px;
         overflow: hidden;
         width: auto;
         display: inline-block;
  }
  div.image img {
         margin: 3px;
         border: 1px solid #ffffff;
  }
  div.image a:hover img {
        border: 1px solid;
  }
</style>
</head>
<body>
 <h1>Sponsors of 6.470</h1>
 <div id="sponsors">
   <div class="image"><a href=""><img src="images/appian.png" width="150" height="85"></a></div>
   <div class="image"><a href=""><img src="images/dropbox.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/facebook.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/nextjump.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/palantir.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/quora.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/tripadvisor.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/vecna.png" width="150px" height="85px"></a></div>
  </div>
</body>

si le width: auto est retiré de #sponsors puis le div#sponsors n'est pas le centre alignés, même si margin: auto est utilisé.

De même, si au lieu de text-align: center est remplacé par margin: auto dans le corps de style ci-dessus, puis la <h1> ne sera pas du centre alignés, ce qui est absurde;

parce que j'ai utilisé margin: auto beaucoup de fois, et il a été en mesure de centrer le contenu sans problème. Donc aider moi et je l'apprécie beaucoup.

PS: j'ai utilisé firefox et d'ailleurs utiliser le doctype tag, il n'est toujours pas en mesure vers le centre avec margin: auto.

source d'informationauteur Md. Reazul Karim

  1. 6

    Définir width ou margin sur votre #sponsors ID

    comme ce

    #sponsors{
margin:0 auto; //left margin is auto, right margin is auto , top and bottom margin is 0 set
width:1000px; //define your width according to your design 
}

    Plus sur la marge d'auto

  2. 2

    Pour le centrage DIV vous devez définir css ci-dessous.

    Exemple

    #sponsors {
   margin:0px auto;
}

    Commentaire

    Vous devez également définir la largeur de la div.

    DÉMO

  3. 2

    Pas besoin de l'aide de margin: 0 auto. Essayez le code ci-dessous, il va travailler:

    div#sponsors{
    /* other css properties */ 
    /* remove display:inline-block and margin: auto */       
    width:100%;  /* instead of width: auto */
    text-align: center;

}

div.img{
    /*remove float:left */
    /* other css properties */
    display: inline-block;
}

    Supprimer text-align: center de body tag et donner à h1 tag à la place.

  4. 1

    Vous devez spécifier la largeur de la div et ne donne pas de marge de deux fois

    #sponsors {
    margin:50px auto 0 auto;
    margin-top:50px;
    overflow: hidden;
    width:160px;
    background:aqua
 }

    DÉMO

  5. 0

    Si toute div u veux dans le centre de la marge d'auto toujours cette div de largeur fixe ......

    #sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
 }
  6. 0

    À utiliser margin:auto vous devez utiliser position:relativeoh, et de définir un width
    Imaginez-vous comme un navigateur, comment faites-vous le centre d'une "boîte" (div) si vous ne savez pas quelle est la largeur de qui? 😉

    Je l'espère, pour vous aider à

    corriger: Christopher Marshall dit que vous n'avez pas besoin position:relative mais spécifier la largeur.

  7. 0
    div{
    position: relative;
    border: 1px solid #ddd; 
    width:150px; 
    height:50px;
    margin: auto;
    /*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/
}
img.displayed {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

}

<html>
<div >
 <a>
 <img class="displayed" src="smiley.gif" >
 </a>
</div>
</html>

    démo ajouté dans jsfiddle

  8. 0

    Prendre un coup d'oeil, vous avez peut-être il y a un float de la propriété. Dans mon cas, le réglage de float à aucun aide. Maintenant div est correctement aligné.