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;"/>
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;"/>
Réponses:
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-left
et l'autre moitié à margin-right
.
margin:auto
centrer un élément dans le flux. ( display:block
ou display:table
, position:static
ou position:relative
, etc.)
0px auto
juste, auto
cela ne fonctionne toujours pas.
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
, bottom
et left
ne 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 relative
ou le static
positionnement.
margin: 0 auto
fonctionne 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 ...
float
et display
puissent changer ce comportement.
Vous pouvez centrer le div de largeur automatique en utilisant display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
Dans mon cas, le problème était que j'avais défini la largeur minimale et maximale sans la largeur elle-même.
position:static
, avoir un width:
ensemble fixe et être un display:block
élément
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.
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/