centrer verticalement une image [FAQ]

**pimpmyride** · 06/11/2006, 09h43

bonjour,

je souhaite centrer verticalement une image dans un div.
La balise <img> se trouve dans un div.

la propriété vertical-align:middle ne fonctionne pas

merci

**Bisûnûrs** · 06/11/2006, 09h47

Normal, la propriété vertical-align ne fonctionne que sur les éléments inline et non les élements block.

Essaie de passer ton div en display:inline ou alors joue avec le padding-top.

**pimpmyride** · 06/11/2006, 10h04

cela ne fonctionne pas avec le display et je ne veux pas utiliser la padding-top car le div est de hauteur variable selon les données qui sont affiché.

du coup j'ai mis un bon vieux <table> qui fonctionne à la perfection et A+ le div.
me love valign

Gunner4902 · 17/11/2007, 15h20

Je redeterre ce post,car j’ai un problème similaire.

Quand j’utilisai le html, j’arrivai à aligner parfaitement une image en milieu de page, mais j’ai oublié le html en pratiquant xhtml et css…

Mon image est générée dynamiquement via un code php, donc impossible de centrer l’image verticalement avec des margin négatives en fonction de la hauteur de l’image.

Je suis tombé sur ce post qui rappelle que l’on peut utiliser valign. Comment s’en sert-on par rapport au code suivant ?

Code html :

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

1
2
3
4
5
6
7
<table>
  <tr>
    <td>
         <img src="..." />
      </td>
    </tr>
</table>

Merci

**Bisûnûrs** · 17/11/2007, 16h14

Code html :

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

<td valign="middle">

Gunner4902 · 17/11/2007, 23h29

Parfait

Par contre ça ne fonctionne pas si on met

Code :

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

<table height="100%">

Il semblerait qu’il faille exprimer la hauteur en pixels ou en em.
N’y a t il pas un moyen plus modulable (pour les diverses résolutions d’écran) ?

**Bisûnûrs** · 17/11/2007, 23h56

C'est un sujet qui revient une fois sur 5 sur le forum ... Pour pouvoir mettre une hauteur en % à un élément, il faut que son élément parent ait une hauteur définie, et ce jusqu'à la balise body et html s'il le faut.