Centrer une image dans un div sans connaitre la largeur de l'image

Bonjour,

J'ai fait quelque recherche et test a partir de topic de ce forum mais je bloque...

J'ai un div

position: absolute;
background: url(../images/cadre_news_milieu.gif);
top: 37px;
left:809px;
width: 190px;
height: 190px;
padding: 20px 5px 0px 5px;
font: 0.99em "Trebuchet MS", helvetica, sans-serif ;
color: #555555;
text-align: center;
display: block;

Dans ce div j'aimerai afficher une image centrée horizontalement.

J'ai donc essayer en faisant une class :

      position: absolute;
      top : 65%;
      margin-top: -50px;
      margin-left:auto; 
      margin-right:auto;   
      display : block ;
      border : none; 

Mais l'image n'est pas centrée.

Le truc c'est que c'est jamais la meme image et je ne connais pas la largeur de l'image.

Est-ce que quelqu'un peut me mettre sur une piste ?

Je vous remercie.

La méthode

margin:auto;

pour centrer un élément ne fonctionne qu'en relative, avec un parent en relative aussi...

Bonjour,

Es-tu obligé de positionner ton image en absolute ?
ça va forcément énormément compliquer les choses

_laurent a écrit :
La méthode

margin:auto;

pour centrer un élément ne fonctionne qu'en relative, avec un parent en relative aussi...

Pas forcément en position relative, non. Ni de parent en relative, non.
A vrai dire, ça fonctionne dans tous les cas où l'élément est dans le flux (donc pas position absolute, fixed ou float).

Si ton image est en background, il suffit de la positionner en background-position: center normalement.
Modifié par Raphael (22 Dec 2011 - 16:27)

Raphael a écrit :
Pas forcément en position relative, non. Ni de parent en relative, non.

Ooops au temps pour moi. (j'ai oublié le "il me semble" mais de toute façon, il me semblait mal..)

Raphael a écrit :
A vrai dire, ça fonctionne dans tous les cas où l'élément est dans le flux (donc pas position absolute, fixed ou float)

Hum... il reste quoi d'autre du coup ? "static" ? ou le paramètre "display" ?


EDIT :

J'ai mal interprété la partie "Cas des éléments positionnés" de ton (très bon, comme toujours) article. J'ai pris ça pour une généralité. Mea culpa.
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
Modifié par _laurent (22 Dec 2011 - 16:46)

js suis debutant et je vois pas comment faire autrement ... en fait ece que je veux dans ce bloc c'est mettre du texte et mon image en dessous, le tout centré.

_laurent a écrit :
Hum... il reste quoi d'autre du coup ? "static" ? ou le paramètre "display" ?

Pour la propriété position, il ne reste que static et relative en effet pour rester dans le flux, mais sinon il reste les 18 valeurs de display (block, inline, inline-block, table, table-cell, list-item, etc.)
Modifié par Raphael (22 Dec 2011 - 16:49)

JeromeR a écrit :
js suis debutant et je vois pas comment faire autrement ... en fait ece que je veux dans ce bloc c'est mettre du texte et mon image en dessous, le tout centré.

Tu dois supprimer plein de choses inutiles et en conservant ça, ça devrait marcher :

background: url(../images/cadre_news_milieu.gif) no-repeat center;
width: 190px;
height: 190px;
padding: 20px 5px 0px 5px;
font: 0.99em "Trebuchet MS", helvetica, sans-serif ;
color: #555555;
text-align: center;

Avec ça :
- l'image de fond est centrée dans son bloc
- le texte est centré dans son bloc

Sinon, avec un exemple en ligne ce serait résolu depuis longtemps à mon avis
Modifié par Raphael (22 Dec 2011 - 16:52)

Voici l'url du site ... ce que je veux faire ce passe dans le bloc "boutique"

http://www.chloe-esthetique.fr/indexb.php

Si je supprime le position: absolute; mon bloc n'est plus la ou je le veux.

si tu connais le width

.limage{
width: xxxpx
position: absolute;
left: 50%;
margin-left: -xxxx/2px;
}

Ca devrait le faire.
Modifié par ghost (22 Dec 2011 - 21:05)

Désolé, je n'avais pas bien lu

.limage {
  border: medium none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div#contenu img {
}

Pourtant sous FF et I9, ma foi c'est centré
Modifié par ghost (23 Dec 2011 - 12:45)

Bonjour ghost, j'ai essayer ton code mais ça ne fonctionne pas. L'image du produit n'est pas centrée.

As-tu un exemple en ligne ?

http://www.chloe-esthetique.fr/indexb.php

Ca ce passe dans le bloc "boutique"

Dans le css tu as un

div#contenu img {
    float: left;
    padding-right: 5px;
}

enlève le float:left; et dans

.limage {
    border: medium none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -50px;
    position: absolute;
    top: 65%;
}

ne la place pas en absolute.

Géniale

Merci beaucoup a tous pour le coup de main !