Centrer une image verticalement dans un bloc

Bonjour,

je voudrais sans utiliser de table, avoir un carré de 205px par 205px qui soit bordé par un cadre d'un pixel, et à l'intérieur une image à la taille variable, dans la limite des 205px, qui soit centrée verticalement...

j'ai utilisé cette technique :

.cadre {
    height: 205px;
    width: 205px;
    border: 1px solid #adb6a8;
}
 
.vignette {
    height: 205px;
    line-height: 205px;
}
 
.vignette img {
    vertical-align: middle;
}
 
 
 
 
 
<div class="cadre">
    <span class="vignette"><img src="charte/nom-image.jpg" alt="machin" />&nbsp;</span>
</div>

Dans ce code, le bloc cadre sert à mettre le border,
le bloc en ligne vignette ne se met pas à 205px de haut...
l'espace insécable à la fin sert de texte pour centrer l'image dans le span vignette, mais il élargit le tout ou passe à la ligne suivant les navigateurs...

Au secours !!!! Que puis-je faire ???

merci de votre aide...

(J'ai lu les divers post ici et sur la FAQ mais je n'ai pas trouvé, en tous cas quelquechose empêche de fonctionner. J'ai bien compris que vertical-align sert à aligner des boites en ligne.)

tout simplement comme ceci

<div style="background-image: url(bg.gif); background-repeat:no-repeat; background-position:center; height:250px; width:250px; border: 1px solid #adb6a8;"></div>

en esperant que ca puisse t'aider

houwaou!!!!! c'est complètement génial comme idée...

Dans mon cas, malheureusement, la vignette doit servir de lien pour ouvrir une page de fiche.
Si je mets une cale transparente en gif dans le bloc pour faire le lien, je peux résoudre le problème, mais par contre, la "vraie" image n'aura aucune chance d'être dans google image qui n'indexe pas les images en background.

Est-ce que le vertical-align ne fonctionne pas dans IE 6 ou c'est moi qui ne comprends pas bien l'utilisation ?

luxe-campagne a écrit :
Est-ce que le vertical-align ne fonctionne pas dans IE 6 ou c'est moi qui ne comprends pas bien l'utilisation ?

Bonsoir,

Line-height / Replaced Element Bug
C'est un bug corrigé dans les versions bêta d'IE 7.

Pour IE6, à moins qu'il y ait une manière d'éviter ce bug, il y aurait possibilité de positionner de manière absolue le span (sans spécifier de hauteur), de le décaler de 50% du haut, puis de positionner de manière relative l'image et la décaler du bas de 50%.
Le tout en commentaire conditionnel pour IE 6 (et plus anciens).
Modifié par Alan (29 Aug 2006 - 18:41)

Merci Alan pour ces précisions, je vais tester de ce pas !