Webmaster Hub > Centrer une image dans un bloc avec cadre

Version complète: sur le forum Webmaster Hub : Centrer une image dans un bloc avec cadre

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

campagne

mardi 29 août 2006 à 10:25

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 :

CODE

.cadre {
    height: 205px;
    width: 205px;
    border: 1px solid #adb6a8;
}

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

.vignette img {
    vertical-align: middle;
}

CODE

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

mercredi 30 août 2006 à 12:34

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

Imperatrice

mercredi 30 août 2006 à 13:30

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 :

CODE

CSS :

CODE

.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

mercredi 30 août 2006 à 14:13

CITATION(Imperatrice @ mercredi 30 août 2006, 14h30)

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

mercredi 30 août 2006 à 14:28

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

CODE

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.