web-dev-qa-db-fra.com

Les marges automatiques ne centrent pas 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;"/>
cssgoogle-chromemargincentering
96
Web_Designer

ajouter 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.

212
Ross

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

Paramétrer l'élément sur position:static; (valeur par défaut) peut résoudre le problème dans ces circonstances. Généralement, les éléments de niveau bloc avec une largeur spécifiée respecteront margin:0 auto; en utilisant relative ou static positionnement.

14
Brendan

Vous pouvez centrer la largeur automatique en utilisant display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
11
sameeuor

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

10
Daniel Sitarz

Chaque fois que nous n'ajoutons pas de largeur et que nous ajoutons 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.

6
tejaswini pant

il y a une alternative à margin-left:auto; margin-right: auto; ou margin:0 auto; pour ceux qui utilisent position:absolute; c'est ainsi:
vous définissez la position gauche de l'élément sur 50% (left:50%;) mais cela ne le centrera pas correctement pour que l’élément soit bien centré, vous devez lui laisser une marge de moins de la moitié de sa largeur, ce qui permettra de centrer parfaitement votre élément

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

2
Andrei

mettre ceci dans le css du corps: background: # 3D668F; puis ajoutez: display: block; marge: auto; au css de l'img.

0
Gail

Pour un bouton bootstrap:

display: table; 
margin: 0 auto;
0
Abram