28220 sujets

CSS et mise en forme, CSS3

[Résolu]Margin : auto ne marche pas avec la balise img?

Re re bonjour (oui, je sais, j'ai plein de problèmes ces jours Smiley lol Smiley lol )

J'ai un problème avec margin : auto si j'applique ça aux images. Avec les tables et div il n'y a aucun problème mais comme vous pouvez le voir à cette addresse :

http://www.final-fantasy.ch/newdesign/partenariat.php

L'icône jaune s'affiche à gauche alors que le code mentionne bien un class="center" qui est mis sous le CSS associé :

img.center {
margin : auto;
}

J'ai pas trouvé ma réponse dans la FAQ et je me demandais si les objets de type images ne pouvaient pas avoir de marges???


Merci d'avance encore une fois

salutations,

le guss qui viens de passer trop d'heures devant xhtml Smiley biggol Smiley biggol

PS : aurais-je oublié de dire que je suis sous Mozilla 1.7.5 et pas sous IE (c'est pas ça le problème...)


Edit : Au fait Raphael, ton forum a un petit problème avec les cache internet, à chaque fois que j'édite un post, le nom du topic change...
Modifié par PMingard (01 Apr 2005 - 19:31)
Administrateur
PMingard a écrit :
J'ai pas trouvé ma réponse dans la FAQ et je me demandais si les objets de type images ne pouvaient pas avoir de marges???

Je n'ai malheureusement pas le temps de me pencher sur ton document ce soir, mais la réponse à cette question est oui sans aucun doute : tous les éléments, qu'ils soient inline (comme <img>) ou bloc, peuvent bénéficier de marges.
Par contre, des marges auto ne suffisent pas à centrer un élément, il faut également lui spécifier une largeur.

D'ailleurs en passant, il existe une propriété faite spécifiquement pour aligner les éléments de type en-ligne : text-align (cette propriété s'applique non seulement au texte mais aussi à tous les éléments en-ligne) :
W3C a écrit :
Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc

Modifié par Raphael (31 Mar 2005 - 23:32)
Salut,

J'ai testé text-align également et ça n'a pas centré l'image. Ce qui est bizarre c'est que cette même classe marche pour des images si elles ne sont pas dans mon container de page.

Par exemple à cette adresse :

http://www.final-fantasy.ch/newdesign/Ff7/ff7images.php?num=2

L'image est centrée dans le container général (body) avec la même classe que pour la page avec le problème...


Edit : Sinon je sais qu'en mettant mon image dans un paragraphe avec text-align : center, la ça marche parfaitement. Est-ce la seule solution? j'aurais aimé le faire sans mettre les images que je dois centrer dans un paragraphe sans texte (pour des raisons sémantiques)
Modifié par PMingard (01 Apr 2005 - 00:20)
PMingard a écrit :

L'image est centrée dans le container général (body) avec la même classe que pour la page avec le problème...

C'est normal avec text-align: center; sur le <body> Smiley biggol
Modifié par Stephan (01 Apr 2005 - 00:24)
en regardant ta feuille de style je dirais qu'il y as 2 petits problèmes


img.center {
   margin : auto;
   text-align : auto;
}






img.center {
   margin : 0 auto;
   text-align : center;
}


Je me dit que cela as plus de chance de fonctionner.

(text-align: auto;) vraiment pas sur que cette syntaxe existe

et (margin: auto;) tu définis auto pour (haut-bas et droite-gauche)

mais pour le centrage vertical cela ne marche pas.

Donc il faut déclaré à 0 ta marge (haut-bas) en plus d'auto
Raphael a pourtant été clair (enfin je pense Smiley confus )

Recommandation CSS2 du W3C a écrit :

Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc

Recommandation CSS2 du W3C a écrit :

'text-align'
Valeur : left | right | center | justify | <chaîne> | inherit
Initiale : selon l'agent utilisateur et selon le sens d'écriture
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet
Médias : visuel

http://www.yoyodesign.org/doc/w3c/css2/text.html#alignment-prop

Donc ce n'est pas l'image (contenu en-ligne) qui doit reçevoir la propriété text-align: center; mais bien son conteneur (élément de type bloc).
Modifié par Stephan (01 Apr 2005 - 00:58)
@Stephan> Pour moi la dessus y'as pas de soucis.

le premier truc qui m'as sauté aux yeux c'est le text-align:auto

Sinon en fonction de ce que je veux faire je mets l'image en display:block; et je centre comme un bloc avec les marges.

Pour IE5.00 IE5.5 text-align:center est nécessaire en plus pour le bloc conteneur.
Stephan a écrit :

C'est normal avec text-align: center; sur le <body> Smiley biggol



Oui, en effet je comprend mieux. J'ai pas pensé au align : center du body qui est la pour centrer le site sur internet explorer qui ne prend vraisemblablement pas en compte margin : auto (en tout cas en version < 6)

Pour mon problème j'ai essayé

margin : auto;
margin : 0 auto;
text-align : center;

et aucune des trois façon n'a marché. J'ai toutefois retenu la version

display : block;

qui marche parfaitement avec

margin : auto;

Merci pour la précision sur le display : block;

Et meilleures salutations à tous
Si ton problème est réglé, un petit [Résolu] serait apprécié en éditant ton premier post (celui qui a servi à créer ton sujet).

Bonne continuation ! Smiley cligne
Sujet clos
Aller à