Les marges automatiques ne centrent pas l'image sur la page

97

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;"/>
css google-chrome margin centering Web_Designer
la source
En testant une classe de style, j'ai trouvé que cela ne fonctionnait pas margin: 0 auto; après quelques tests, on a découvert que si le nom de classe que vous ajoutez à un élément a le même nom qu'un élément, cela ne fonctionnera pas.
LostLight

Réponses:

218

ajouter display:block;et cela fonctionnera. Les images sont en ligne par défaut

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

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

Ross
la source
12
+1 Pour avoir raison. Ce serait une excellente réponse si vous expliquiez ce qui est nécessaire pour margin:autocentrer un élément dans le flux. ( display:blockou display:table, position:staticou position:relative, etc.)
Phrogz
1
@Phrogz était d'accord; a ajouté quelques explications.
Ross
15
Ceux qui liront ceci peuvent également trouver utile d'ajouter "float" none, car tout autre type de float va casser votre marge automatique.
Code Whisperer
Mais ce n'est toujours pas centré. Il est uniquement centré horizontalement. Je veux le centrer verticalement, mais même si je change 0px autojuste, autocela ne fonctionne toujours pas.
Aaron Franke
14

Dans certaines circonstances (comme les versions antérieures d' Internet Explorer, Gecko, Webkit) et à l' héritage, des éléments avec position:relative;empêcheront margin:0 auto;de travailler, même si top, right, bottomet leftne sont pas définies.

La définition de l'élément sur position:static;(valeur par défaut) peut le résoudre dans ces circonstances. Généralement, les éléments de niveau bloc avec une largeur spécifiée respecteront en margin:0 auto;utilisant soit relativeou le staticpositionnement.

Brendan
la source
1
margin: 0 autofonctionne très bien sur des éléments relativement positionnés tant qu'il s'agit d'éléments de bloc sans flotteur et d'une largeur spécifiée ...
Ennui
Je suppose que c'est du sarcasme. Si vous modifiez votre réponse afin qu'elle ne soit pas inexacte, je supprimerai le vote défavorable. J'écris du CSS depuis près de 15 ans et je ne me souviens jamais que les marges automatiques ne fonctionnent pas pour centrer horizontalement des éléments de largeur fixe relativement positionnés - bien que d'autres propriétés aiment floatet displaypuissent changer ce comportement.
Ennui
14

Vous pouvez centrer le div de largeur automatique en utilisant display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
mêmeeuor
la source
1
Cela fonctionne, et je ne sais pas pourquoi. Pourriez-vous expliquer?
ThatsJustCheesy
1
Je n'ai jamais utilisé cela auparavant, mais cela fonctionne pour moi maintenant.
zkytony
10

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

Daniel Sitarz
la source
3
pour récapituler: l'élément doit être position:static, avoir un width:ensemble fixe et être un display:blockélément
Joey T
C'était un problème de largeur pour moi aussi - bootstrap a automatiquement configuré mon div pour qu'il utilise 100% disponible
Edmund Sulzanok
6

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

pantalon tejaswini
la source
2

il existe une alternative à margin-left:auto; margin-right: auto;ou margin:0 auto;pour ceux qui utilisent position:absolute;voici comment:
vous définissez la position gauche de l'élément à 50% (left:50%; ) mais cela ne le centrera pas correctement pour que l'élément soit centré correctement, vous devez lui donner un marge de moins la moitié de sa largeur, qui centrera parfaitement votre élément

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

Andrei
la source
0

Pour un bouton bootstrap:

display: table; 
margin: 0 auto;
Abram
la source
0

mettez ceci dans le css du corps: background: # 3D668F; puis ajoutez: affichage: bloc; marge: automatique; au css de l'img.

Gail
la source