[résolu] Centrer en hauteur

bonjour,
est-il possible de centrer en hauteur le contenu d'une div.

par exemple j'ai un div de 400px x 400px et dans cette dic je met une image de 200 x 350.

je voudrait que m'on image soit centrée en largeur comme en hauteur dans cette div.

pour centrer en largeur j'ai pas trouver mieu que e faire :

.imgref{ background:#FFFFFF; width: 400px; height: 400px;  text-align:center;
}

Modifié par fabrice88 (05 Aug 2009 - 11:37)

Bonjour,

Si tu connais à l'avance les dimensions du conteneur et de l'image, tu peux te contenter d'un padding-top sur le conteneur par exemple.

conteneur {
  width: 200px;
  height: 350px;
  padding: 25px 100px;
}

Par contre si les dimensions exactes de l'image ne sont pas connues, ça devient plus délicat. Des solutions existent mais elles ne sont pas toujours bien supportées par les navigateurs.

Voici une solution utilisant display:inline-block:
http://covertprestige.info/test/46-centrer-image-conteneur-fixe.html

L'autre solution consiste à utiliser le mode de rendu des cellules de tableau. Une cellule de tableau peut avoir une hauteur (qui fonctionne alors comme une hauteur minimale), et avec vertical-align: middle on peut centrer verticalement son contenu. Il y a deux moyens d'obtenir un rendu de type cellule de tableau:
1. Utiliser display: table-cell sur n'importe quel élément ou presque.
2. Utiliser un tableau de mise en page (<table><tr><td>...</td></tr></table>).
La première solution n'est pas compatible avec IE 6-7 (mais compatible IE8 et autres navigateurs modernes).

bonjour merci pour les infos.
j'ai opté pour la solution tableau (dommage pour le css)
j'ai donc appliqué un style a mon td et du coup l'image quelque soit sa taille (dans ses limites max définit) est centrée aussi bien verticalment qu'horizontalement.

td {
background:#FFFFFF;
border-width:10px;
height: 173px;
width:173px;
padding: 10px;
vertical-align: middle; text-align:center;
}

voilà si il existe une solution pour eviter les tableaux et surtout que se soit compatible avec les dufférents naviguateurs...

fabrice88 a écrit :
si il existe une solution pour eviter les tableaux

Oui.

fabrice88 a écrit :
et surtout que se soit compatible avec les dufférents naviguateurs...

Non.