28173 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical d'image

salut à tous le monde.. Smiley cligne
j'aimerais réalisé une galerie d'images (3 c'est considéré comme une galerie... Smiley cligne )
mais ce que je voudrais surtout c'est que mes images soit centrée verticalement:

 <div id='galerie'>
            <h2 ><span>titre</span></h2>
            <div class='blocimage'><img src='1.gif' alt='nous' /></div>
            <div class='blocimage'><img src='2.gif' alt='toi' /></div>
            <div class='blocimage'><img src='3.gif' alt='moi' /></div>
        </div>




#galerie{width:370px;height:160px;border:2px yellow solid;}
.blocimage{float:left;margin-left:10px;display:table-cell; vertical-align: middle;}

je n'arrive pas à trouver le moyen de les centrer verticalement , y'a t'il qu'un tableau qui puissent faire cela ?
Modifié par gaylover (18 Dec 2006 - 09:06)
La propriété vertical-align centre ton élement par rapport a un autre element en ligne, il faut donc que tes images soient directement les une a cotés des autres pour que ça marche (que je sache), comme ça:
<div id='galerie'>
<h2 ><span>titre</span></h2>
<img src='1.gif' alt='nous' />
<img src='2.gif' alt='toi' />
<img src='3.gif' alt='moi' />
</div>


En mettant des div (si besoin graphique, mais en fait souvent tu peux de débrouiller sans avec les border, padding, margin) je n'ai jamais reussi non plus a obtenir qqchose qui marche bien sur tout les navigateurs.
Modérateur
bonsoir,

oui les elements en ligne sont centrables les uns par rapport aux autres , et seule cette technique est applicable dans IE.

Pourtant ta demarche du display:table est bonne .

Voici une proposition reprenant les 2 options :
1 le display table et compagnie .
2 une pirouette pour IE en passant les elements en ligne et en reactivant le layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>gall valign middle</title><style type='text/css'>
#galerie{
	width:370px;
	height:160px;
	border:2px yellow solid;
	display:table;
	border-top:0;
	margin:auto;
	text-align:center
}
h2 {
	display:table-caption;
	width:370px;
	text-align:center;
	border:2px yellow solid;
	margin:0 auto;
	border-bottom:0;
	background:green;
}
.blocimage{
	padding-left:10px;
	display:table-cell; 
	vertical-align: middle;
}
span.blocimage {width:0;}/* servira pour IE */
</style>
 <!--[if IE]>
<style type="text/css">
.blocimage {
	display:inline;
	width:110px;
	zoom:1;/* pour le mode standard , inutile en quirk */
}
span.blocimage {
	width:0;
	height:160px;
}
</style>
<![endif]--> 
</head>
<body>
 <div id='galerie'>

            <h2 ><span>titre</span></h2>
	<span class='blocimage'></span>

            <div class='blocimage'><img src='1.gif' alt='nous' /></div>

            <div class='blocimage'><img src='2.gif' alt='toi' /></div>

            <div class='blocimage'><img src='3.gif' alt='moi' /></div>

        </div></body></html>


Moralité , encore un tableau deposseder de ses balises .

++
je n'ai pas bien compris à quoi sert ce span ?
<span class='blocimage'></span>

en tout cas... merci pour cette astuce... y'a encore un ptit bug sous ie6 si on met des images la troisieme est revoyer en deuxieme ligne....trop d'espace à gauche et à droite ...
Modérateur
bonsoir/bonjour,

désolé , j'avais deja oublié ce sujet.


Pour le span dans IE ...

dans ton premier post tu indique que tu cherche a faire une boite de 160px de hauteur , dans laquelle tu as 3 autres boites qui contiendrait cahcune une image a centrée verticalement.

Le display:table; puis table-cell; va tepermettre cela.

Dans IE , cela ne marchera pas , les 3 sous conteneurs sont des elements de type block , que tu peut passer en flottant (tout aussi inutile dans l'optique de centrage verticale) ou inline.

Les elements inlines , et ce , dans tout les navigateurs , peuvent etre centrée mutuellement sur leur axe verticales. Le plus haut d'entre eux donnera son centre verticale en references aux autres.

En revenant a tes 160px de haut , ils suffit alors de donner cette dimension a l'un deux . Aussi longtemps que les autres elements ne depasseront pas cette hauteur , il sera la reference .

Le span fait en quelque sorte office de reference de hauteur minimale de la ligne.

Cette hauteur est effectivement minimale dans les 2 cas.

Dans IE , nous n'auront pas affaire a un simili tableau et un retour a la ligne sera occasionné sitot que le conteneur n'est plus assez large (comme du simple texte !) , pas dans les autres navigateur . (une fois de plus en eliminant le tableau les choses sont moins simple , il faut prendre compte , largeur , bordures , padding , margin, etc...)

Dans FF , tout es elements declaré en display:table-ell ; d'un conteneurs resteront sur une même ligne en s'elargissant ou se compressant . On retrouve la le comportement d'un tableau. d'ailleurs , si l'on omet de declaré l'un d'eux en display:table-cell; il se verra affublé de ce comportement de toute façon. , on pourrait presque faire le raccourci de n'appliquer le "table-cell" qu'a un seul d'entre eux.

Si tu as reellement besoin d'un tableau , alors pourquoi s'en priver ?

p.s. pour ton exemple , les 3 div.blocimage , peuvent etre reduit a un seul contenant les 3 images et le span .

bonne journée
Modifié par gcyrillus (16 Dec 2006 - 01:23)
Modérateur
bonsoir ,

le zoom:1; sert a activer le "layout" dans IE , ce qui va donner alors a ton element block , passé en element en ligne un comportement equivalent plus ou moins a un inline-block . , tu vas donc pouvoir le dimensionner sans qu'il provoque de retour a la ligne avant et apres lui.
note que je t'indique aussi une particularité a laquelle il faut faire attention ou se souvenir :
a écrit :
zoom:1;/* pour le mode standard , inutile en quirk */


++
Sujet clos
Aller à