Pourquoi la marge ne permet-elle pas de centrer automatiquement une image?

93 
<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

Le se divdéveloppe à 100% comme il se doit mais l'image ne se centre pas. Pourquoi?

html css Joe Phillips
la source

Réponses:

10

Vous devez le rendre au niveau du bloc;

img {
   display: block;
   width: auto;
   margin: auto;
}
TheDeadMedic
la source
Pourquoi s'aligne-t-il uniquement horizontalement et non verticalement?
Mr Bell
4
L'alignement vertical n'est pas aussi simple que vous auriez pu l'espérer. Tout dépend de la spécification CSS - consultez cet article magnifiquement concis sur le sujet - phrogz.net/css/vertical-align/index.html
TheDeadMedic
8

Ajouter style="text-align:center;"

essayez ci-dessous le code 

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>
Pranay Rana
la source
Je ne pense pas que votre réponse soit incorrecte, mais la vôtre manque d'explication sur le type d'affichage.
Joe Phillips
Bien que votre réponse puisse être considérée comme une solution alternative, je ne la conseillerais pas. La raison étant le fait que si vous ajoutez autre chose à l'intérieur du div, un titre, par exemple, il s'alignerait au centre de l'image. Pour aligner l'en-tête à gauche, vous devrez écrire plus de styles pour celui-ci. Vous devrez continuer à faire cela pour tout ce que vous ajoutez dans le div. Il display: block;est donc fortement recommandé d' ajouter à l'image.
Devner
2

Je sais que c'est un ancien message, mais je voulais partager comment j'ai résolu le même problème.

Mon image héritait d'un float: à gauche d'une classe parent. En définissant float: none, j'ai pu faire en sorte que margin: 0 auto et display: block fonctionnent correctement. J'espère que cela peut aider quelqu'un à l'avenir.

Ryan Hollingsworth
la source
1

J'ai trouvé que je dois définir une largeur spécifique pour l'objet ou rien d'autre ne le mettra au centre. Une largeur relative ne fonctionne pas.

Catwoman
la source
2
Cela ne répond pas à la question. Pour critiquer ou demander des éclaircissements à un auteur, laissez un commentaire sous son message - vous pouvez toujours commenter vos propres articles, et une fois que vous avez une réputation suffisante, vous pourrez commenter n'importe quel article .
Kristijan Iliev
Mon point était que, bien que plusieurs personnes aient donné des réponses qui fonctionnent, elles ne fonctionnent que si le code comprend une définition spécifique de la largeur de l'objet. Ex: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> fonctionnera, mais n'utilisez pas de taille relative, comme "width : 50% ". Bien sûr, si vous utilisez "largeur: 100%", le centrage n'est pas un problème, car il n'y a alors aucune marge à gauche ou à droite de l'objet.
Catwoman
0

ouvrir divpuis mettre

style="width:100% ; margin:0px auto;"

image tag (ou) contenu

fermer div

Hamd Islam
la source
0 
<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
Salil
la source
0

J'ai trouvé ... marge: 0 auto; travaille pour moi. Mais j'ai également vu que cela ne fonctionnait PAS car la classe était dépassée par une autre spécificité qui avait ... float: left; alors faites attention à cela, vous devrez peut-être ajouter ... float: none; cela a fonctionné dans mon cas car je codais une requête multimédia.

Dino
la source