Centrer une image dans un bloc avec cadre

[campagne]

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

[marcelman]

J'ai exactement la même problématique de centrage relatif vertical d'images. Donc je suis également preneur de soluce...

[Imperatrice]

Une méthode qui marche :

Utiliser un tableau plutôt qu'un div ...le "vertical-align" préfère une cellule

Ajouter un "text-align=center" en classe cadre, virer l'espace insécable, et normalement, c'est tout bon.

HTML :

<table class="cadre">
	<tr>
		<td class="vignette"><img src="charte/nom-image.jpg" alt="machin" /></td>
	</tr>
</table>

CSS :

.cadre {
	height: 205px;
	width: 205px;
	border: 1px solid #adb6a8;
	text-align : center; 
}

.vignette {
	height: 205px;
	line-height: 205px;
}

.vignette img {
	vertical-align: middle;
}

Après vérif, j'ai un affichage correct sous firefox et IE.

Voilà. J'espère que çà résoud ton problème.

Yark.. çà m'apprendra à lire vite... tu voulais éviter les tables... désolée, j'avais pas vu.

[Raphael]

Une méthode qui marche :

Utiliser un tableau plutôt qu'un div ...le "vertical-align" préfère une cellule

C'est aussi ce que j'aurais répondu (cf solution 5.

Dans certains cas, on ne peut pas actuellement vouloir le beurre et l'argent du beurre : ne pas avoir de tableaux et des comportements CSS qui fonctionnent partout même sur IE.

Les tableaux sont parfois la meilleure solution.

[Arkh]

Une solution que malheureusement IE6 ne prends pas (à tester avec IE7), mais qu'Opera et Firefox prennent super bien (et Safari je supposes):

.cadre
{
display:table-cell;
vertical-align:middle
}