marge: 0 auto; ne fonctionne pas

Question

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

Answer 1

ajoutez display:block; et ça va marcher. Les images sont en ligne par défaut

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

En définissant la marge sur auto , le navigateur attribue la moitié de l'espace restant à margin-left et l'autre moitié à margin-right .

Answer 2

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

Réglage de l'élément 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.

Answer 3

Dans mon cas, le problème était que j'avais défini la largeur minimale et maximale sans la largeur elle-même.

Answer 4

Chaque fois que nous n'ajoutons pas de largeur ni margin:auto , je suppose que cela ne fonctionnera pas. C'est de mon expérience. La largeur donne l’idée où il doit fournir des marges égales.

Answer 5

il y a une alternative à l' margin-left:auto; margin-right: auto; ou margin:0 auto; pour ceux qui utilisent position:absolute; il s'agit:
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/