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
source

197

Parce que votre image est un élément de bloc en ligne . Vous pouvez le changer en un élément de niveau bloc comme ceci:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

et il sera centré.

— Keltex
source

10

Vous devez le rendre au niveau du bloc;

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
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
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
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
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
source

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— Salil
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
source