[résolu] Centrer une image

Bonjour,

Voilà, une fois n'est pas coutume c'est un problème concernant Firefox. Je désire centrer les images qui apparaissent dans une liste non ordonné. J'ai donc ciblé les images avec: #tutorial ul li img .

Un exemple : http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=304&pageCourante=1

#tutorial ul {
padding: 0 ;
margin: 0;
}

#tutorial ul li {
list-style: none;
padding: 5px 0 5px 5%;
}

#tutorial ul li img {
padding: 10px;
margin: 0 5px 5px 0px;
background: #fff;
text-align: center;
}

Sous IE6 les images sont parfaitement centrées et pas avec Firefox.
Modifié par fireworkszone (21 Jun 2006 - 00:13)

Bonjour,

Text-align pour une image, y'a pas un truc qui te choque ?

Je n'ai pas compris ce que tu voulais centrer sur la page de ton lien. Que cherche tu à faire exactement ?

Mikachu a écrit :
Text-align pour une image, y'a pas un truc qui te choque ?

Non non, c'est le nom de la propriété qui est mal choisi :

a écrit :
Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc. Les significations des valeurs sont :
left, right, center et justify

Or, <img> est bien un contenu en-ligne

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

Par contre l'erreur vient du fait que tu appliques text-align à l'image, ce qui a pour effet de centrer le contenu dans l'image... or il n'y a aucun contenu dans l'image.

Il faut appliquer le text-align sur le conteneur de l'image, donc <li>.

Ah ben merci Raphael, j'apprends un truc que j'avais mal compris

Oui, j'ai déjà fait un essai en plaçant le text-align: center dans:

#tutorial ul li
{text-align: center;}

mais le problème c'est que dans les <li> il y a des images mais aussi du texte. Alors c'est le texte qui sera centré et c'est pas ce que je veux.

J'aimerais avoir les images centrées mais pas le texte.

fireworkszone a écrit :
J'aimerais avoir les images centrées mais pas le texte.

Hmm dans ce cas, il faudrait rajouter un bloc autour de l'image et dans la liste.

Tu peux être plus clair STP ? ça donnerait quoi en terme de code ?

Sinon il y a toujours

#tutorial ul li img {
padding: 10px;
display:block;
margin: 0 auto;
background: #fff;
}

Mais en l'état ça va centrer toutes les images dans les listes de #tutorial, y compris celles entourées de texte
Modifié par Alan (20 Jun 2006 - 18:36)

Merci Alan, merci pour ton aide et pourtant je connaissais cette méthode d'utiliser auto à droite et gauche pour centrer un élément.