[Résolu] Centrer une image en étant en display:block;

Bonjour à tous,

J'ai un triple problème qui se pose à moi.
Je voudrais centrer une image dans un div dont on connait la longueur.
Simple je fais ceci :

<p class="centrer">mon image</p>

Avec la class "centrer" qui a pour propriété : text-align:center;

Très bien, tout fonctionne ! Cependant, je souhaite supprimer la marge indésirable sous mon image. D'accord très bien, j'ajoute ceci dans mon CSS :

img { display:block; }

Mais maintenant l'image n'est plus centrée...

Mes liens ont une couleur d'arrière plan et sans le display:block; au passage de la souris sur l'image, on voit un bien moche bleu dessous l'image...

Il y a t'il un moyen de réussir à combiner les 3 en même temps ?

Merci d'avance
Modifié par Snoopy17 (04 Jun 2007 - 22:10)

Salut,

Supprime le paragraphe autour de ton image et applique le style suivant à celle-ci :

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

Et tu aura ton image correctement centrée.

a écrit :
Avec la class "centrer" qui a pour propriété : text-align:center;

Attention, le nom d'une class ne doit jamais décrire l'apparence de l'élément.

Country a écrit :

Attention, le nom d'une class ne doit jamais décrire l'apparence de l'élément.

Merci ça marche
Comment ça pourquoi :o ?

EDIT : Si je veux placer 2 images l'unes à côté des autres IMPOSSIBLE avec Display:block; ! comment faire dans ce cas là ?
Modifié par Snoopy17 (04 Jun 2007 - 19:32)

Snoopy17 a écrit :
Comment ça pourquoi :o ?

Parce que dans ce cas là tu ne sépare plus le contenu de la présentation (ce qui est le principal but du CSS).
Exemple tout bête, imagine que tu ais un texte que tu veut mettre en bleu, alors tu lui donne une class "bleu" :

.bleu { color:blue; }

Puis un jour, pour une raison ou pour une autre, tu veux avoir ce même texte en rouge, et là tu as 2 solutions :
1. Où tu te retrouve avec :

.bleu { color:red; }

et bonjour la logique
2. Où tu change la couleur dans le CSS et tu renomme ta class "rouge" dans ton CSS et partout dans ton code HTML. Peu pratique.

Voila, donc plutôt donner un nom en rapport avec le rôle de l'élément (.menu, .description, .auteur, etc.)

Snoopy17 a écrit :
EDIT : Si je veux placer 2 images l'unes à côté des autres IMPOSSIBLE avec Display:block; ! comment faire dans ce cas là ?

Mmm, pour plusieurs images tu devra utiliser un conteneur en effet, donc ton paragraphe avec text-align:center est très bien. Je suppose que la marge que tu as sous ton image est la marge du paragraphe, donc applique lui juste un margin:0; et le tour est joué :

HTML :

<p class="imgcontainer">
 <img src="image1.jpg" alt="" />
 <img src="image2.jpg" alt="" />
</p>

CSS :

.imgcontainer {
 text-align:center;
 margin:0;
}

La « marge » sous une image en affichage de type en-ligne (par défaut) correspond à l'espace réservé pour les jambages des lettres, l'image étant considérée comme un caractère. Pour en savoir plus, la FAQ en parle (espaces indésirables sous les images).

On pourra utiliser vertical-align: middle sur les images, si besoin.

Merci Florent V. ça marche mieux avec vertical-align: middle, c'est beaucoup plus adapté à mes besoins, merci