28172 sujets

CSS et mise en forme, CSS3

[Résolu] Pourquoi margin: 0 auto; ne marche pas en ciblant <img>

Salut à vous tous,

Je viens d'être confronté à un problème étrange. J'ai placé une <img> dans un <header> et dans la CSS j'ai ciblé le sélecteur <img> pour lui attribuer la propriété margin: 0 auto;

Cela n'a pas marché !

J'ai essayé en plaçant une classe dans <img>, que j'ai ciblée dans la CSS. Cela ne marchait toujours pas.

J'ai ciblé le <header> puis le <img> (header, img {}) et toujours pas de centrage possible.

Enfin, j'ai placé la balise <img> dans une <div> avec une classe. J'ai ciblée cette classe dans CSS et là ça marche, mon logo se centre.

Pourquoi ? Pourquoi cibler la balise <img> ne prend pas en compte la propriété de centrage mais cibler la classe d'une <div> englobant la balise <img>, là ça marche ?

C'est un bug ?

Cordialement,
Modifié par ObiJuanKenobi (09 Feb 2022 - 17:47)
Modérateur
Salut,

c'est assez dur a suivre. Est-ce que tu pourrais nous donner ton code HTML et CSS quand ca marche et ca ne marche pas ?

btw la balise img est inline par défaut or le centrage avec margin auto ne fonctionne que sur les block me semble-t-il :
https://jsfiddle.net/rt4o7cey/
Modifié par _laurent (09 Feb 2022 - 17:55)
Salut ObiJuan,

Je comprends que tu essaies de centrer une image horizontalement. Le comportement que tu décris est normal, car par défaut, un élément <img> est affiché en inline-block. Cela veut dire qu'il se comporte à peu près de la même manière qu'un élément inline. Il n'est donc pas possible de lui appliquer de marges.

La raison pour laquelle ton troisième essai fonctionne est que tu places ton image dans un <div>, qui est lui un élément block. Ainsi, en lui appliquant la marge horizontale auto, tu arrives bien à le centrer, ainsi que son contenu.

La solution à ton problème est donc de soit inclure ton image dans un conteneur de type block, comme un <div> et de centrer celui-ci, soit d'appliquer un display: block; à ton image (en ciblant la balise, ou encore mieux, en lui affectant une classe)

.mesImagesCentrees {
    display: block;
    margin: 0 auto;
}


Que la force soit avec toi Smiley smile

EDIT : _laurent m'a devancé de quelques minutes Smiley lol
Modifié par GuillaumeBauer (09 Feb 2022 - 18:12)
Meilleure solution
Modérateur
GuillaumeBauer a écrit :
EDIT : _laurent m'a devancé de quelques minutes Smiley lol

Oui mais tu expliques mieux Smiley lol
OK, merci à vous deux pour vos explications.

J'ai parfaitement compris que seuls les éléments de type "bloc" peuvent être centrés horizontalement.

Je me coucherai un peu plus intelligent ce soir !
Sujet clos
Aller à