Auto marges de ne pas centrer l'image dans la page

Dans cet exemple l'image n'est pas centrée. Pourquoi? Mon navigateur est Google Chrome v10 sur windows 7, pas IE.

<img src="/img/logo.png" style="margin:0px auto;"/>
  • Tester une classe de style, j'ai trouvé que ce n'était pas de travail margin:0 auto; après quelques tests découvert que si le nom de la classe que vous ajoutez un élément a le même nom qu'un élément cela ne fonctionnera pas.
InformationsquelleAutor Web_Designer | 2011-04-20
  1. 213

    ajouter display:block; et ça marchera. Les Images sont inline par défaut

    Pour clarifier, la largeur par défaut pour un block élément est auto, qui, bien sûr, occupe toute la largeur de l'élément conteneur.

    Par le réglage de la marge de auto, le navigateur attribue la moitié du reste de l'espace pour margin-left et l'autre moitié à margin-right.

    • +1 Pour avoir raison. Serait une bonne réponse si vous élaboré sur ce qui est nécessaire pour margin:auto pour centrer un élément dans le flux. (display:block ou display:table, position:static ou position:relative, etc.)
    • convenu; ajout d'une explication.
    • Ceux qui lisent ce peut également trouver utile d'ajouter "float" aucun comme ayant tout autre type de flotteur du buste de la marge de l'auto.
    • Mais il n'est toujours pas centré. C'est uniquement centrée horizontalement. Je veux le centrer verticalement, mais même si je change 0px auto juste auto cela ne fonctionne toujours pas.
    InformationsquelleAutor Ross
  2. 14

    Dans certaines circonstances (comme les versions antérieures d'IE, Gecko, Webkit) et à l'héritage, les éléments avec position:relative; permettra d'éviter margin:0 auto; de travail, même si top, right, bottom, et left ne sont pas définies.

    Réglage de l'élément de position:static; (valeur par défaut) peut fixer dans ces circonstances. Généralement, les éléments de niveau bloc avec une largeur spécifiée respecter margin:0 auto; en utilisant soit relative ou static positionnement.

    • margin: 0 auto fonctionne très bien sur les éléments en position relative, tant qu'ils sont des éléments de bloc sans flotteur et d'une largeur spécifiée...
    • Je suppose que c'est du sarcasme. Si vous modifiez votre réponse, de sorte qu'il n'est pas inexact, je vais supprimer le downvote. J'ai écrit CSS depuis près de 15 ans, et ne peut pas toujours se rappeler auto marges de ne pas travailler à l'horizontale centre positionnée relativement fixe la largeur des éléments - bien que d'autres propriétés comme la float et display pouvez changer ce comportement.
    InformationsquelleAutor Brendan
  3. 12

    Vous pouvez centrer automatique de la largeur de la div à l'aide de display:table;

    div{
margin: 0px auto;
float: none;
display: table;
}
    • Cela fonctionne, et je ne sais pas pourquoi. Pourriez-vous expliquer?
    • Je n'ai jamais utilisé cela avant, mais cela fonctionne pour moi maintenant.
    InformationsquelleAutor sameeuor
  4. 10

    Dans mon cas, le problème était que j'avais mis en min et max largeur sans largeur lui-même.

    • pour rappel: l'élément doit être position:static, fixe width: ensemble et être un display:block élément
    • C'était la largeur de question pour moi de trop - bootstrap automatiquement mis mon div utilisation de 100% disponible
    InformationsquelleAutor Daniel Sitarz
  5. 6

    Chaque fois que nous n'avons pas ajouter la largeur, et ajouter margin:auto, je suppose que ça ne marchera pas. C'est à partir de mon expérience. Largeur donne l'idée exactement où il doit assurer l'égalité des marges.

    InformationsquelleAutor tejaswini pant
  6. 2

    il y a une alternative à margin-left:auto; margin-right: auto; ou margin:0 auto; pour ceux qui utilisent position:absolute; c'est de cette façon:

    vous réglez la gauche position de l'élément à 50% (left:50%;) mais ce ne sera pas le centrer correctement pour que l'élément à centrer correctement, vous devez lui donner une marge de moins de la moitié de sa largeur, qui sera le centre de votre élément parfaitement

    voici un exemple: http://jsfiddle.net/35ERq/3/

    InformationsquelleAutor Andrei
  7. 0

    Pour un bootstrap bouton:

    display: table; 
margin: 0 auto;
    InformationsquelleAutor Abram
  8. 0

    mettre ceci dans le corps du css:
    arrière-plan:#3D668F;
    puis ajouter:
    display: block;
    margin: auto;
    l'img du css.

    InformationsquelleAutor Gail