Forum d'entraide PHPFrance

Bonsoir,

Je travaille sur une petite galerie d'images.
Je souhaite afficher la liste des miniatures.

J'ai défini un div carré de 100px de côté.
Les miniatures des photos mesurent 100x75 ou 75x100.

Je voudrais que celles-ci soient bien centrées - et automatiquement ! -
dans le div carré qui les contient.
- Horizontalement pour les photos en mode portrait (verticales)
- Verticalement pour les photos en mode paysage (horizontales)

J'ai tenté un padding auto dans le div, mais ça ne marche pas.
J'ai tenté un margin auto dans l'img, mais ça ne marche pas.

// mon CSS
img        { border:none ; margin:auto ; }
.miniature { width:100px ; height:100px ; margin:10px ; padding:auto ; }

//mon HTML
<div class="miniature"><img src="toto.png" alt="" /></div>

Merci.

À tout hasard, "text-align: center" ? sur l'image, voire sur le div, je ne suis pas sûr de moi sur ce coup

Marche pas.

Tout comme le vertical-align, d'ailleurs...

et line-height: 100px; ?

margin: auto devrait fonctionner.

j'ai oublié d'ajouter, avec le

Code : Tout sélectionner

line-height: 100px;

, il faut rajouter

Code : Tout sélectionner

vertical-align: center;

enfin, j'ai rien essayer hein...? c'est de tête

vertical-align:center ;

est incorrect.

vertical-align:middle ;

est correct, mais inefficace.

Quant au margin:auto, Cyrano, tu seras aussi étonné que moi de voir qu'il ne "fonctionne" pas.

Slt,

Une solution qui fonctionne sous FF, Opera, Netscape Browser.
Mais comme d'hab, ça ne marche pas sous IE6 (j'ai pas le 7)

Code : Tout sélectionner

<style type="text/css">
	.div_img{
		width:100px;
		height:100px;
		display: table-cell;
		margin: auto;
		vertical-align: middle;
		border: solid 1px;
	}
	.miniature{
		display: block;
		margin: auto;
	}
</style>
</head>
<body>
	<div id="div_img1" class="div_img">
		<img class="miniature" src=".." width="100" height="75" alt="" />
	</div>
	<div id="div_img2" class="div_img">
		<img class="miniature" src=".." width="75" height="100" alt="" />
	</div>

La seule solution que j'ai trouvé pour le centrage vertical est de passer par les tableaux (tapez pas la tête!)
Sinon le vertical-align ne marche pas : c'est une histoire de centrage d'éléments inline dans d'autres éléments inline, c'est pour ca que ca ne marche jamais avec les div (block) mais plutot bien avec les display: table-cell (mais ca, ca marche pas sous IE...), après ne m'en demandez pas plus, j'ai pas bien compris la doc

si tu trouves une autre solution, je serai ravi de la copier

J'avais lu le premier message en diagonale, je n'avais pas fait attention qu'albat voulait centrer verticalement également. Ça me semblait bizarre qu'il n'arrive pas à centrer horizontalement mais bon, on a tous des trous parfois

Ensuite, j'ai relu le topic en oubliant le post d'Ajoloca, du coup j'ai réécrit un truc très similaire à ce qu'il a fait. Mais bon, au cas où ça serve, voici à quoi j'en suis arrivé (sans trop forcer, je ne suis pas terrible en CSS donc je sais que ça sert à rien

). Ça marche sous Opera 9, Fx 2. Ça ne marche pas sous... vous connaissez la suite.

Code : Tout sélectionner

<html>
<head>
<style type="text/css">
img
{
	vertical-align: middle;
} 

.miniature
{
	width:  800px;
	height: 600px;
	border: solid 1px red;

	line-height: 600px;
	text-align:  center;
}
</style>
</head>

<body>

	<div class="miniature">&nbsp;<img src="IMAG0003.JPG" alt="" />&nbsp;</div>

</body>
</html>

Ah, j'allais oublier le plus important, pourquoi je poste ce message en fait. Sans texte dans le div, l'image se retrouve collée en haut. Pareil si j'ajoute "img { display: block; }"

Edit: d'après Google, pour faire fonctionner ça sous IE il faut définir un font-size de la taille de la boîte * 0.95. J'ai testé avec font-size: 540px et ça semble plutôt bien marcher.
Edit(2): "bien marcher"... sous IE. Sous les autres navigateurs ça ressemble plus à ce qu'on veut. Bleh.

Mon avis c'est que vous vous compliquez franchement la vie à vouloir utiliser des div à tout prix, même quand ce n'est pas recommandé.

Les recommendations du W3C sont d'éviter l'utilisation des tableaux pour la présentation des pages, excepté dans le domaine où les tableaux sont plus adaptés, c'est à dire la présentation de tableaux.

Or une galerie de miniatures, c'est un tableau. Dans ce cas donc, les tableaux sont plus adaptés. Et vous évitez les problèmes d'incompatibilité d'affichage avec les diférents navigateurs tout en respectant les recommendations du W3C.

Maintenant, pour ceux qui souhaitent voir les multiples possibilités d'aligner verticalement un élément dans les div : http://forum.alsacreations.com/faq/#item3

Il y a d'autres avantages à utiliser des DIVs plutôt qu'un tableau. Par exemple, en utilisant des DIVs, le nombre d'images par ligne n'est pas fixe. Imaginons que la page fasse 80% de l'écran en largeur (plutôt qu'une largeur en pixels), on pourra caser 6 images en largeur sur un écran 19' et 5 sur un 17', sans toucher à quoi que ce soit. C'est pas parfait pour autant, parce que si on avait prévu d'afficher 25 images par page ça tombe plus juste, mais tu vois le truc.

Ensuite, ça dépend de la page, si albat utilise un div c'est sûrement qu'il y a une raison

Une galerie d'image n'est pas un tableau.

Un tableau permet de représenter des données tabulaires, c'est à dire des données dont la même colonne de chaque ligne contient un données dont la valeur représente la même chose ...

Ce qui n'est pas le cas pour une galerie d'image.

Ici, tu veux utiliser un tableau pour une raison d'affichage (7*7 ou 5*5), pas pour afficher simplement des données

Tu as regardé le sujet sur Alsacréations?
http://css.alsacreations.com/Faire-une- ... web-en-CSS

Et dans leur FAQ (genre tu n'es pas le 1er à vouloir faire cela...)
Comment centrer verticalement un élément ?

AB : un tableau ne convient pas car :

- une galerie n'est pas un tableau.
- le nombre de lignes et de colonnes n'a rien de fixe

Hubert : Ben... tu l'as dit mieux que moi, en fait.

zeus : pareil.

Mère teresa : j'avions pourtant farfouillé sur Alsa.
Mais visiblement pas assez. J'y retourne...

Forum d'entraide PHPFrance

Centrage d'IMG dans un DIV

Centrage d'IMG dans un DIV