Centrer images avec ombres portées

Salut

J'ai trouvé un tuto pour réaliser des ombres portées sur des images ici mais je n'arrive pas dutout à centrer les images dans la page; ces dernières restent à gauche (à cause du float:left).
Voici le code:

HTML:

<div id="corps">
   <div class="img-shadow">
       <img src="images/test.jpg" alt="test"/>
   </div>
</div

CSS:

#corps {
  text-align: center;
}

.img-shadow {
  float:left;
  background: url(images/effet_ombre.png) no-repeat bottom right !important;
  background: url(images/effet_ombre.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }
 
.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  }

J'ai essayé de mettre <div style=“clear:left”></div> à la fin du code html mais ça ne change rien.
Auriez-vous une idée pour que je puisse centrer les images?

Merci pour votre aide!

Bonjour,

Tu ne peux pas centrer des flottants. C'est juste pas possible, par définition.

Si tu as un nombre d'images défini et une largeur précise, tu peux englober tes images flottantes dans un DIV auquel tu donneras cette largeur en pixels, et utiliser les marges automatiques pour le centrer (margin: 0 auto;).

Autrement, le salut se trouve dans la déclaration display:inline-block. Tu peux appliquer cette déclaration à tes DIV qui portent la classe "img-shadow", ce qui te permettra de les placer côte-à-côte et de les centrer comme des éléments en display:inline, tout en leur appliquant une mise en forme de bloc. Problème: support bugué dans IE6 et IE7 (support correct dans IE8). Il y a peut-être moyen d'obtenir un comportement proche dans IE 6 et 7 en utilisant display:inline et le HasLayout... à voir.
Modifié par Florent V. (29 Oct 2009 - 10:07)

Florent V. a écrit :
Bonjour,

Tu ne peux pas centrer des flottants. C'est juste pas possible, par définition.

Si tu as un nombre d'images défini et une largeur précise, tu peux englober tes images flottantes dans un DIV auquel tu donneras cette largeur en pixels, et utiliser les marges automatiques pour le centrer (margin: 0 auto;).

Autrement, le salut se trouve dans la déclaration display:inline-block. Tu peux appliquer cette déclaration à tes DIV qui portent la classe "img-shadow", ce qui te permettra de les placer côte-à-côte et de les centrer comme des éléments en display:inline, tout en leur appliquant une mise en forme de bloc. Problème: support bugué dans IE6 et IE7 (support correct dans IE8). Il y a peut-être moyen d'obtenir un comportement proche dans IE 6 et 7 en utilisant display:inline et le HasLayout... à voir.

Merci pour ta réponse
Les images sont les unes en dessous des autres.
J'ai donc essayé des les englober dans une div et des jouer sur les marges mais pour l'instant ça ne fonctionne pas.
Je continue d'essayer et vous tiens au courant.

Deux solutions:

<p style="text-align:center;">
  <span class="shadow" style="display: inline-block;">
    <img>
  </span>
</p>
<p>
  <span class="shadow" style="display: table; margin: 0 auto;">
    <img>
  </span>
</p>

Aucune des deux n'est pleinement compatible avec IE6 et IE7.

Florent V. a écrit :
Deux solutions:

<p style="text-align:center;">
  <span class="shadow" style="display: inline-block;">
    <img>
  </span>
</p>
<p>
  <span class="shadow" style="display: table; margin: 0 auto;">
    <img>
  </span>
</p>

Aucune des deux n'est pleinement compatible avec IE6 et IE7.

J'ai essayé ces 2 solutions mais les images ne se centre pas dutout.
Pourtant j'ai lu sur ce site qu'il fallait rajouter <div style=“clear:left”></div> pour annuler l'effet du float: left. mais comme dit dans mon 1er message ça en fonctionne pas non plus...
Modifié par Cedwic (30 Oct 2009 - 18:55)

Cedwic a écrit :
J'ai essayé ces 2 solutions mais les images ne se centre pas du tout.

Si tu gardes le float:left, c'est normal.

Cedwic a écrit :
Pourtant j'ai lu sur ce site qu'il fallait rajouter <div style=“clear:left”></div> pour annuler l'effet du float: left.

Mouais, cet article est daté, présente des faits qui ne sont plus vrais, et dit aussi quelques bêtises. Je le laisserais de côté.

Si tu nous montrais plutôt ce que tu essaie de faire (visuel), et nous précisais un peu tes contraintes? Quelles dimensions d'images, quel type de positionnement?

Pour l'instant je teste les ombres portées sur une page vierge de 1000px de large. (pour les intégrer ensuite sur mon site en construction).
Donc la taille de l'image est de 450/230.
Les ombres sont celles téléchargeables en gif ici et en png ici.
Donc je souhaite faire en sorte que l'image ombrée soit centrée (dans le sens de la largeur) dans la page.
Car en appliquant la méthode décrite dans mon 1er message, certes le résultat de l'ombre est nikel, mais je n'arrive pas dutout à centrer l'image, même en suivant tes conseils.
Voici une capture d'écran:

http://img142.imageshack.us/img142/6299/ombreportee.jpg

La l'image est sur la gauche or je souhaiterai qu'elle soit centrée.

Bonjour,

Les puristes vont peut-être hurler mais personnellement, je mets

<center><table><tr><td>(mes images ombrées)</td></tr></table></center>

Bon ça fait un peu Mick Giver comme méthode mais ça a l'avantage de marcher sous FF et IE6
Modifié par meluesine (19 Nov 2009 - 17:26)