18068 sujets

Questions générales et questions de débutants

Centrer image dans un div

Bonjour,

j'ai vu que le sujet a été plusieurs fois abordé mais je n'y arrive quand même pas... Smiley confused

voici le code HTML:

<div class="photo_equipe">
      <img class="photo" src="monimage.jpg" alt="monimage">
</div>


el le CSS :

.photo_equipe{
	display:block;
	float:left;
	background-image:url(../miniatures/PasDePhoto.jpg);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	overflow:hidden;
}

img.photo{
}


rien de bien compliqué, mais bon.. là je comprend pas...

merci !
salut,

élimine la class de ton image et pour ta div "photo_equipe" applique ceci :

#photo_equipe {
	text-align: center;
             }


attention ta div "photo_equipe" dois etre nomée... comme ceci :

<div id="photo_equipe">ton image</div>
Administrateur
Parfois la FAQ semble vraiment invisible aux yeux des membres.
Elle répond à 80% des questions posées... mais personne ne prend le temps de la consulter.
C'est parfois lassant au bout d'un moment de se donner du mal pour rien Smiley decu

Voilà la réponse à ta question : http://forum.alsacreations.com/faq/#item74
j'avais bien lu la FAQ mais ça ne fonctionne pas... c bien pour ça que je poste.

pour ma div "photo_equipe" j'en ai plusieurs donc, j'utilise une class et j'ai beau lui mettre un text-align : center, il veut rien savoir... Smiley decu

en fait j'ai une liste de photos individuelles de toute l'équipe, et en fond de ma div, il y a un fond vert qui permet de remplir le cadre de 60x60 au cas ou il n'y a pas de photo ou si la photo est plus petite que la div.
(Par rapport au premier code que j'ai posté, j'ai changé le background-image en background-color)

Reste plus qu'à centrer l'image, mais là ça pose problème.
Modifié par Bis2Kt (24 Jul 2006 - 09:57)
Sois plus attentif: tu appliques les style pour centrer sur ton div
ça risque pas de marcher!
Il faut que tu comprenne à quoi servent les marge latérales:auto
Et comme le répète Raphael, prend le temps de lire la FAQ, les tutos...
ça ne pourra que être bénéfique pour l'efficacité de ton travail.
Mon code :

<div class="photo_equipe">
<img src="image.jpg" alt="mon image" />
</div>

.photo_equipe{
	text-align:center;
	float:left;
	background-color:#cce196;
	height:60px;
	width:60px;
	overflow:hidden;
}


celui de la FAQ :

<div class="centrage"><img src="&#8230;" alt="&#8230;" /></div>

div.centrage {text-align: center;}


Je dois être bête, je vois pas la différence... Smiley confused
Sujet clos
Aller à