Pourquoi ne pas margin:auto-centrer une image?

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

La div étend à 100% comme il se doit, mais l'image n'a pas de centre de lui-même. Pourquoi?

InformationsquelleAutor Joe Phillips | 2010-06-10

css html

185

Parce que votre image est un inline-block élément. Vous pouvez le changer pour un bloc-niveau de l'élément comme ceci:
```
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
```
et il sera centré.

InformationsquelleAutor Keltex
10

Vous devez vous rendre au niveau du bloc;
```
img {
   display: block;
   width: auto;
   margin: auto;
}
```
- Pourquoi a-t-il seulement d'aligner horizontalement et non verticalement?
- Alignement Vertical n'est pas aussi simple que vous pourriez espérer. C'est tout à la CSS - découvrez ce superbe article concis sur la question de l' phrogz.net/css/vertical-align/index.html
InformationsquelleAutor TheDeadMedic
8

Ajouter style="text-align:center;"

essayer de code ci-dessous
```
<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>
```
- il est orthographié text-align
- Je ne pense pas que votre réponse est incorrecte, mais la vôtre est dépourvue de toute explication du type d'affichage.
- Bien que la réponse à votre question peut être considérée comme une solution alternative, je ne vous conseille pas d'elle. La raison d'être du fait que si vous ajouter quelque chose à l'intérieur de la div, un titre, par exemple, il permettrait d'aligner le centre de l'image. Pour aligner la tête vers la gauche, vous devriez écrire plus de styles pour elle. Vous devrez continuer à faire cela pour tout ce que vous ajoutez dans le div. Ainsi, l'ajout de display: block; de l'image est fortement recommandé.
InformationsquelleAutor Pranay Rana
1

je sais que c'est un vieux post, mais je voulais partager ce que j'ai résolu le même problème.

Mon image a été hérité d'un float:left à partir d'une classe parent. Par la mise en float:none j'ai pu faire margin:0 auto et display: block fonctionner correctement. Espérons qu'il peut aider quelqu'un dans le futur.

InformationsquelleAutor Ryan Hollingsworth
1

J'ai trouvé que je dois définir la largeur de l'objet ou rien d'autre ne la rendra centre. Une largeur relative ne fonctionne pas.
- Ce n'est pas de fournir une réponse à la question. À la critique ou à la demande de clarification d'un auteur, de laisser un commentaire en dessous de leur poste, vous pouvez toujours commenter vos propres messages, et une fois que vous avez suffisamment de réputation vous serez en mesure de commentaire sur post.
- Mon point est, bien que plusieurs personnes ont donné les réponses que le travail, elles ne fonctionnent que si le code contient une définition précise de la largeur de l'objet. Ex: <img [...etc., etc.,...] style="display:block; margin:auto; width:200px" /> va fonctionner, mais n'utilisez pas de taille relative, comme "width:50%". Bien sûr, si vous utilisez "width:100%" puis le centrage n'est pas un problème, car il y a alors pas de marge sur la gauche ou la droite de l'objet.
InformationsquelleAutor Catwoman
0

ouvrir div puis mettre
```
style="width:100% ; margin:0px auto;" 
```
image balise (ou) contenu

près div

InformationsquelleAutor Hamd Islam

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

InformationsquelleAutor Salil

0

J'ai trouvé...
margin: 0 auto; fonctionne pour moi. Mais j'ai aussi vu PAS de travail due à la classe d'être éclipsée par une autre spécificité qui avait ... float:left;
regardez donc de qui vous devrez peut-être ajouter ... float:none; cela a fonctionné dans mon cas, comme je l'ai été le codage d'un media query.

InformationsquelleAutor Dino

Vous devez vous connecter pour publier un commentaire.