Centrer une image à l'intérieur d'un div

Bonjour,

Voici le code:

<div style="float: left; width: 140px; height: 120px;">
    <div style="margin: auto">
        <img src="img001.jpg" border="0" />
    </div>
</div>

J'ai ce div où il y a une image thumb de 80x80 à l'intérieur.
En faisant margin:auto, j'ai cru que l'image se centrera mais c'est pas le cas.

Comment faire?
Modifié par dummycreation (09 Nov 2011 - 16:07)

Salut,

Pour appliquer des marges automatiques à ton div, il faut lui donner une dimension explicite.
Modifié par Victor BRITO (09 Nov 2011 - 16:13)

Je reformule donc ma question, comment centrer l'image car le div intermédiaire je l'ai ajouté récemment

Hello.

Le div intermédiaire ne sert à rien. Donc retire le.
Si le but est d'avoir un div avec de l'espacement autour de l'image, autant appliquer à ton div un padding:

div {
    float: left;
    padding: 20px 30px;
    background: red;
}
img {
    display: block; /*Supprime l'espace indésirable sous l'image*/
}

Un petit exemple.

D'ailleurs retire aussi le border sur la balise img, ça fait pas sérieux.

Puisque tu connais la taille de ton conteneur et la taille de ton image, tu n'as qu'à ajouter un padding:20px 30px; sur ta div ! Simplement.


Ok, trop lent ! ^^ Modifié par mob (09 Nov 2011 - 16:55)

Et une autre piste qui va bien: pour centrer horizontalement une image dans un conteneur, le text-align:center ça marche très bien.