campagne Posté 29 Août 2006 Partager Posté 29 Août 2006 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... Lien vers le commentaire Partager sur d’autres sites More sharing options...
marcelman Posté 30 Août 2006 Partager Posté 30 Août 2006 J'ai exactement la même problématique de centrage relatif vertical d'images. Donc je suis également preneur de soluce... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Imperatrice Posté 30 Août 2006 Partager Posté 30 Août 2006 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Raphael Posté 30 Août 2006 Partager Posté 30 Août 2006 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Arkh Posté 30 Août 2006 Partager Posté 30 Août 2006 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} Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant