Centrer image dans une div

Bonjour every body ,
Je m'explique , j'aimerais centrer les images (des produits) :

http://img543.imageshack.us/img543/5131/sanstitre5z.jpg

Voici le code html :

<div style="width:180px;height:230px;text-align:center;">
    <img src="/ici.jpg"; />
</div>

En sachant qu'il faut que cela soit applicable a plusieurs image de dimension différente mais que le bloc contenant (180px x 230px) ne changera jamais ...

Merci d'avance les kiwis ...

margin: auto;

et/ou

<div style="width:180px;height:230px;text-align:center;"> 
    <img align="center" src="/ici.jpg"; /> 
</div> 

Non rien a faire avec ceci :

<div style="width:180px;height:230px;text-align:center;">
<img align="center" src="/ici.jpg"; />  
</div> 

La première chose: inclure du css dans du html, c'est une très mauvaise idée.

as tu d'autres codes css qui donne des ordres à des images?
ta div est elle dans une table ou une autre div ?

Il faudrait plus de code pour t'aider. Peut tu afficher le code complet de ton cadre ?
Modifié par Justaman (21 Jan 2011 - 23:23)

Voici le code complet de mon cadre :

<div id="Contenu"> 
 
    <div class="table1"> 
        <div class="prix"> 
        20.10 € 
        </div> 
        <div class="ref"> 
        Réf :<span style="color: #3670f3;"> 011111</span> 
        </div> 
    <br>
         <div style="width:180px;height:230px;text-align:center;"> 
                 <img align="center" src="/ici.jpg"; />   
         </div>  
    <a href="image.jpg" class="zoomer"  rel="lightbox" title="titre">+ Zoomer</a>  
    <br> 
    <p style="text-align:left";>Descriptions :<span style="color: #3670f3;">Volute en S decale 350x110 (16x6)</span> </p> 
    <br> 
    <a href="#" class="button orange">Demande de devis</a> 
    </div> 
</div>

Et voici le css qui correspond :

.table1 { 
width:230px; 
height:396px; 
border: 1px solid #a2a2a2;  
display: inline-block; 
margin-left:10px; 
} 
 
.ref { 
background-color:#d2d0d0; 
text-align:left; 
float:left; 
width:120px; 
height:31px; 
line-height:31px; 
border: 1px solid #a2a2a2;  
border-left:none; 
border-top:none; 
display: inline; 
margin-top:0px; 
padding-left:5px; 
 
} 
 
.prix { 
float:right; 
background-image: url(Theme/prix.png); 
margin-top:-20px; 
margin-right:-20px; 
width:79px; 
height:61px; 
line-height:61px; 
font-family:Tahoma, Verdana, Geneva; 
font-size:14px; 
color:white; 
display: inline-block; 
 
}

Merci

Salut,
Déjà 2 ou 3 remarques sur le code :

- Attention tu mets des ; un peu partout dans les balises html (même hors des guillemets) !

- Tu as un peu une divite aigu mais bon.. En quoi ça t'es utile d'entourer uniquement ton prix d'une div ? un paragraphe ou autre balise pourrait être plus appropriée non ? Ou quand on en vient à faire des div class="table" il serait peut être plus judicieux d'utiliser une vraie balise table non ? Et pour styler un élément précis par exemple la couleur des réf tu mets :

.ref span{ 
color:blue;
}

- Tu ne devrais pas utiliser autant d'attribut style en ligne où tu vas t'y perdre entre les styles appliqués depuis le fichier css et ceux appliquer direct dans le html.
De plus le display:inline-block; ne fonctionne pas sur IE7 et moins (ou p'tetre 8 aussi.. je sais plus).

Ensuite pour centrer ton image un margin: 0 auto; appliqué à l'image devrait fonctionner (éventuellement un display:block; avec ? c'est le week end mes neurones ne sont plus sur de rien ).

Donc en résumé nettoie ton code html et tu y verras déjà plus clair !
Bon week end.

oliviadox a écrit :

Ensuite pour centrer ton image un margin: 0 auto; appliqué à l'image devrait fonctionner

Pour le centrage horizontal le :

margin : 0 auto

ne marche que sur des éléments ayant une taille fixée malheureusement.

Pour le centrage vertical : regardes tu coté de

display : table-cell;

Sauf que IE <8 fait des siennes encore une fois.

Bonjour,
pour centrer des images de taille variable dans des div :
http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html#cv_image.

Cependant, j'ai un bug sous Chrome. Le centrage vertical ne fonctionne qu'avec un border.

Code CSS :

.contener_image{
width:150px;
height:130px;
background: #eed ; 
border: 1px solid #dcb ;  
margin: 10px 12px 10px 0 ; 
text-align: center;
float:left;
}

.logo_partenaire{
height:90%;
width : 90% ;
line-height:130px; 
display: inline;
text-align:center;
border : 1px solid  #eed; /* border de même couleur que le background du contener_image pour centrer verticalement sur chrome*/
}

.logo_partenaire img {
display : inline-block;
vertical-align: middle;
}

XHTML :

<div class="contener_image">
	<div class="logo_partenaire">
	<span><img src="img1.jpg" alt=" "/></span>
	</div>
</div>
<div class="contener_image">
	<div class="logo_partenaire">
	<span><img src="img2.jpg" alt=" "/></span>
	</div>
</div>
<div class="contener_image">
	<div class="logo_partenaire">
	<span><img src="img3.jpg" alt=" "/></span>
	</div>
</div>

Si ça peut aider, sachant qu'il y a du bidouillage !