Centrer 2 images dans un div

devlm · 03/02/2012, 13h30

bonjour,

je dois réaliser un filigrane prix en baisse à placer sur une image existante dans un td de tableau.

J'ai donc ajouté un div dans lequel j'ai placé mes deux images, elles se superposent bien seulement, je ne parviens pas à les centrer.

si je fais un text-align:center, les images sont centrés mais avec un décalage de 20px vers la droite en plus et je ne sais pas d'ou il vient.

A noter que j'ai des images de largeur différentes.

Voici le HTML extrait du PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td width="50%">
<div id="filigrane-prix" style="height:150px;">
<img id="diap2350" class="bordvert2px superpose" height="150" alt="MAISON DE VILLAGE REGION BONNETABLE" name="diap2350" src="asp/photos/2350p1.jpg">
<img class="filigrane-prix-image superpose" border="0" src="images/filigrane-prix.png">
</div>
</td>

Voici le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#filigrane-prix {
 position:relative;
}
 
img.superpose {
   position: absolute;
   z-index:2;
}
 
.filigrane-prix-image {
z-index: 10;
}

si vous avez une autre solution d'alignement, je veux bien.

NoSmoking · 03/02/2012, 15h41

Bonjour,

Citation:

J'ai donc ajouté un div dans lequel j'ai placé mes deux images, elles se superposent bien seulement, je ne parviens pas à les centrer.

ceci n'est pas nécessaire si tu utilises une TABLE dont les TD te centreront directement en verticale.

Tu peux essayer ceci pour exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
.centrage_img{
  width:800px;
  height:400px;
  text-align:center;
  background-color:#e0e0f0;
  border:1px solid #00f;
}
.img_1{
  display:block;     /* important pour les images */
}
.img_2{
  display:block;     /* important pour les images */
  margin-top:-90px; /* moins hauteur de la 1st image */
}
</style>
</head>
<body>
<table>
  <tr>
    <td class="centrage_img">
      <img class="img_1" src="http://aka-cdn-ns.adtech.de/apps/36/Ad2881060St3Sz1Sq5149476V0Id3/developpez-728-2.gif">
      <img class="img_2" src="http://www.developpez.net/template/images/logo.png">
    </td>
  </tr>
</table>
</body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email