centrer des images

**valal** · 05/10/2006, 09h35

slt,
j'essaye de trouver la meilleure façon de centrer des images. ce que je souhaite c'est d'avoir mes images exactement au milieu de la page (verticalement) et ainsi avoir la meme distance du bord gauche et du bord droit. mais comme je ne connais pas la largeur des images(qui varie d'une images à l'autre), donc je ne peut utiliser les margin-left/right. une idée?

merci.

ps: j'ai essayé le valign="middle" mais ça donne rien chez moi.

**Bisûnûrs** · 05/10/2006, 09h43

Solution facile si tu n'as pas peur des tableaux :

Code :

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

1
2
3
4
5
<table width="100%" height="100%">
   <tr>
      <td align="center" valign="center"><img src="monimage" /></td>
   </tr>
</table>

**titoumimi** · 05/10/2006, 09h44

passe les margin left et right en auto

**valal** · 05/10/2006, 10h03

je vous remercie tous les deux. je vais voir les deux méthodes des que j'arrive au travail.

et au passage non je n'ai pas peur des tableau. moi les tableau je les

**valal** · 05/10/2006, 10h26

je vien de faire un premier test unitaire:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>
 
<div style="margin-left:auto;margin-right:auto;">
      <img src="file:\\\C:\Documents and Settings\Administrator\My Documents\My Pictures\dune.jpg"/>
</div>
 
<table width="100%" height="100%">
   <tr>
      <td align="center" valign="center"><img src="file:\\\C:\Documents and Settings\Administrator\My Documents\My Pictures\dune.jpg" /></td>
   </tr>
</table>
 
</body>
</html>

la méthode avec les margin-left:auto ne donne pas de resultat chez moi (IE+Firefox) par contre le tableau fonctionne trés bien.....je vais faire d'autre tests car mon code va s'integrer dans une appli et je vous dirai si ça me va ou pas.

en attendant si quelqu'un à une autre idée...

**blueice** · 05/10/2006, 11h17

Code :

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

1
2
3
4
5
6
7
8
 
body {
position:absolute;
left:50%; 
top:50%;
margin-top:-50px; /* moitié de la hauteur de l'image */
margin-left:-50px; /* moitié de la largeur de l'image */
}

**trotters213** · 05/10/2006, 10h59

tu peux faire comme ceci:

Code :

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

1
2
3
4
5
position:absolute;
     left: 50%; 
     top: 50%;
     margin-top: - ...; /* remplace ... par moitié de la hauteur de l'image */
     margin-left: - ...; /* remplace ... par moitié de la largeur de l'image */

tu peux le faire dynamiquement en PHP et n'oublie pas le - devant les marges.

**Bisûnûrs** · 05/10/2006, 11h02

Envoyé par trotters213

tu peux faire comme ceci:

Code :

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

1
2
3
4
5
position:absolute;
     left: 50%; 
     top: 50%;
     margin-top: - ...; /* remplace ... par moitié de la hauteur de l'image */
     margin-left: - ...; /* remplace ... par moitié de la largeur de l'image */