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...

t'as essayé margin ou padding ??

que puis-je faire avec margin ou padding ?

ben je sais pas un truc du style
 
.vignette{
       margin-top: 2%;
       margin-bottom: 2%;
}
 
OU Alors
 
.vignette{
       padding-top: 2%;
       padding-bottom: 2%;
}

désolé, j'ai essayé là et ça ne marche pas.
j'ai essayé aussi en mettant la valeur auto, comme pour centrer horizontalement, mais pas de résultat non plus.

<div class="cadre">
    <span class="vignette"><img src="charte/nom-image.jpg" alt="machin" />&nbsp;</span>
</div>  
 
waw
 
<img src="charte/nom-image.jpg" alt="machin" classe="vignette" />
 
.vignette {
    height: 205px;
    width: 205px;
    border: 1px solid #adb6a8;
    padding: 2%;
}

Merci mIRROR, mais dans ce cas, l'image fera 205px de côté, et je peux avoir des images plus petites, rectangulaires que je ne veux pas "exploser"...

ok mais ca je pouvais pas deviner
mais je trouve que t as quand meme trop de conteneurs
sinon a cause d un bug d ie on est obligé de rajouter un hack...
je deteste ca mais je crois qu il y a pas le choix ^^
 
<div class="vignette"><img /></div>
 
.vignette {
  text-align:center;
  border:1px solid #adb6a8;
  height:205px;
  width:205px;
  line-height:205px;
  vertical-align:middle;
}
 
.vignette img {_padding-top:102px;_margin-top:-xxpx;}  
le underscore rend la propriété visible seulement par ie
le premier padding top correspond a la moitié de la hauteur de  ton conteneur
celle ci ne change jamais
par contre la marge correspond a la moitié de la hauteur de ta vignette et tu devras te taper les changements a la main a chaque fois
sauf si tu trouves le moyen de gerer ca dynamiquement ^^
 

Impossible de faire un vertical-align sur un DIV
 
Edit : Et pour avoir des difference entre IE et FF, il vaut mieux utilier !important ²

 
Ben vas y ... montre moi comment tu fais marcher un vertical-align sur un DIV ...
 
Edit : Je me repète mais ce n'est pas possible

 
 
   
le code est la t as besoin que je te donne un coup de main ?    
 
apres c est sur que c est pas fait pour ca mais ca marche menfous

Le code que t'as filé plus haut ? Il ne sert à rien du tout ton vertical-align C'est ton line-height qui fait que c'est centré verticalement... essaye, vire le, tu verras bien...

ok on s est mal compris je pensais que tu disais que ca marchait pas du tout et tu parlais juste du vertical-align
j avais mal compris la doc et j etais convaincu que vertical-align ne marchait que couplé a un line-height spoursa j utilise les deux
 
toutes mes confuses c est kloug

Je reviens après plusieurs jours, en fait j'ai réussi avec une méthode que je vais vous exposer, un petit bout de hack quand même pour IE...
 
mIRROR je ne connaissais pas ce truc du underscore au début du nom de la class pour IE, je vais tester et voir si ça ne rend pas la CSS non conforme. A bientôt donc !