28173 sujets

CSS et mise en forme, CSS3

[Non Résolu] Centrer verticalement texte+image

Bonjour.

Alors voilà, je n'arrive tout simplement pas à centrer verticalement les éléments à la droite de ma page (logo google + texte pour l'exemple mais toutes mes images n'ont pas la même taille), enfin dans un des éléments.

J'ai bien essayé avec "vertical-align" en "middle" mais ça ne marche pas.

J'ai récupérer un code là :

A partir de ce dernier j'ai maintenant ça

et voilà les codes

HTML
<style type="text/css">
a.slidea {background:url(http://www.google.com/images/logo_sm.gif);}
a.slideb {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidec {background:url(http://www.google.com/images/logo_sm.gif);}
a.slided {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidee {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidef {background:url(http://www.google.com/images/logo_sm.gif);}
a.slideg {background:url(http://www.google.com/images/logo_sm.gif);}
a.slideh {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidei {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidej {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidek {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidel {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidem {background:url(http://www.google.com/images/logo_sm.gif);}
a.sliden {background:url(http://www.google.com/images/logo_sm.gif);}
a.slideo {background:url(http://www.google.com/images/logo_sm.gif);}
a.slidep {background:url(http://www.google.com/images/logo_sm.gif);}
a.slideq {background:url(http://www.google.com/images/logo_sm.gif);}
a.slider {background:url(http://www.google.com/images/logo_sm.gif);}
</style>
<link href="../../medias/strix.css" rel="stylesheet" type="text/css">
<!--DEBUT  INFO-->
<!-- InstanceBeginEditable name="Info" -->
<div id="info">
<div id="container">
<span class="Categorie">Test</span>
<br><br>
<a class="gallery slidea" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Warm to Cold" title="Warm to Cold"><br><br>Warm to Cold</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Wheels" title="Wheels"><br><br>Wheels</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Urban Squirrel" title="Urban Squirrel"><br><br>Urban Squirrel</span></a>
<br><br><br>
<a class="gallery slided" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Mother and Daughter" title="Mother and Daughter"><br><br>Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="River Junk" title="River Junk"><br><br>River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Portrait One" title="Portrait One"><br><br>Portrait One</span></a>
<br><br><br>
<a class="gallery slideg" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Portrait Two" title="Portrait Two"><br><br>Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Portrait Three" title="Portrait Three"><br><br>Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Bow and Fiddle rock" title="Bow and Fiddle rock"><br><br>Bow and Fiddle rock</span></a>
<br><br><br>
<a class="gallery slidej" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="The Pose" title="The Pose"><br><br>The Pose</span></a>
<a class="gallery slidek" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Warm to Cold" title="Warm to Cold"><br><br>Warm to Cold</span></a>
<a class="gallery slidel" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Wheels" title="Wheels"><br><br>Wheels</span></a>
<br><br><br>
<a class="gallery slidem" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Urban Squirrel" title="Urban Squirrel"><br><br>Urban Squirrel</span></a>
<a class="gallery sliden" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Mother and Daughter" title="Mother and Daughter"><br><br>Mother and Daughter</span></a>
<a class="gallery slideo" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="River Junk" title="River Junk"><br><br>River Junk</span></a>
<br><br><br>
<a class="gallery slidep" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Portrait One" title="Portrait One"><br><br>Portrait One</span></a>
<a class="gallery slideq" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Portrait Two" title="Portrait Two"><br><br>Portrait Two</span></a>
<a class="gallery slider" href="#nogo"><span><img src="http://www.google.com/images/logo_sm.gif" alt="Portrait Three" title="Portrait Three"><br><br>Portrait Three</span></a>
</div>
</div>


CSS
/*   P O R T F O L I O   H T M L    */
#container {
	position:relative;
	width:640px;
	height:370px;
	vertical-align:middle;
}
a.gallery, a.gallery:visited {
	display:inline;
	color:#000;
	text-decoration:none;
	border:1px solid #000;
	width:40px;
	height:40px;
	float:left;
	margin:5px;
	cursor:default;
}
a.gallery span {
	visibility:hidden;
	display:block;
	position:absolute;
	width:475px;
	height:370px;
	text-align:center;
	background-color: #FFFFFF;
}

a.slidea span, a.slideb span, a.slidec span, a.slided span, a.slidee span, a.slidef span, a.slideg span, a.slideh span, a.slidei span, a.slidej span, a.slidek span, a.slidel span, a.slidem span, a.sliden span, a.slideo span, a.slidep span, a.slideq span, a.slider span {
	left:160px;
	top:0px;
}
a.gallery:hover {
	visibility:visible;
	white-space:normal;
	border:1px solid #cc3300;
	z-index:100;
}
a.gallery:hover span {
	visibility:visible;
	z-index:100;
}
a.gallery:hover span img {
	border:0px;
	z-index:100;
	background:#FFF;
}
a.gallery:focus, a.gallery:active {
	border:1px solid #000;
	z-index:10;
}
a.gallery:active span, a.gallery:focus span {
	visibility:visible;
	z-index:10;
}
a.gallery:active span img, a.gallery:focus span img {
	border:0px;
	z-index:10;
}


Donc voilà, j'ai bien essayé mais rien n'y fait. Peut-être manque-t-il une classe ?

Peut être auriez vous une idée pour jouer avec les marges ?

J'ai bien essayer mais je trouve pas la combinaison gagnante

Merci d'avance
Modifié par Strix (10 Dec 2006 - 09:38)
Modérateur
bonsoir.

Si le span ne sert qu' a contenir l'image , et ne pas affiché de fond , alors lui enlevé sa hauteur ,et le mettre a 50% du haut de sa position de reference.

Quand a l'image , en lui donnant un margin-top negatif de 50% , elle remontera de la moitié de sa hauteur.

exemple/extrait css modifié:
a.gallery span {
	visibility:hidden;
	display:block;
	position:absolute;
	width:475px;
[b]/* plus de hauteur definie*/[/b]
	text-align:center;
	background-color: #FFFFFF;
}

a.slidea span, a.slideb span, a.slidec span, a.slided span, a.slidee span, a.slidef span, a.slideg span, a.slideh span, a.slidei span, a.slidej span, a.slidek span, a.slidel span, a.slidem span, a.sliden span, a.slideo span, a.slidep span, a.slideq span, a.slider span {
	left:160px;
[b]top:50%;[/b]
}
a.gallery:hover {
	visibility:visible;
	white-space:normal;
	border:1px solid #cc3300;
	z-index:100;
}
a.gallery:hover span {
	visibility:visible;
	z-index:100;
}
a.gallery:hover span img {
	border:0px;
	z-index:100;
	background:#FFF;
[b]margin-top:-50%;[/b]

}


autre solution , appliquer l'image en background au span en position center center , mais la elle n'existe plus vraiment car tu n'as plus le alt"description de l'image" en contenue alternatif/complementaire.

++
Modérateur
bonjour,

je ne vois pas les modif proposées faites sur ta page test en ligne , pas moyen de verifié tes dires ou de voir si il y a une erreur d'interpretation de ta part sur ce que je t'ai proposé.
Je n'ai pas de doute par rapport au comportement de firefox, peut-etre un deplacement tres inattendu dans IE7 , 6 ou inferieur (on peut eventeuellemnt s'attendre a 3 bugs "differents " avec IE7 , 6 , et 5.5.)

++
Modérateur
bonjour,

effectivement , il y a interference avec le max-height:300px;

L'image est remontée alors de la moitié de sa taille réelle et pas de la taille d'affichage limité a 300px dans le cas ou elle est plus haute.

Ce genre de gallery fonctionne tres bien avec des images de même dimension , arf , content de le savoir Smiley smile ..

Le probleme vient du max-height:300px ; qui n'est dailleurs pas supporte par IE6 .

Peut-etre faut-il limiter cette hauteur au moment de l'upload en proposant qu'elle soit redimensionné a 300px de hauteur au max ou l'automatiser aprés l'upload (reecriture du fichier avec la librairie gd au besoin ) .

ou affiché l'image en background du span (dimensionné) en position center center et proposer l'aperçu taille relle en popup ou autre methode.

En enlevant le max-height dans cette configuration , il y aura forcement debordement avec les grandes images et avec ou sans toujours dans IE6 ....

++
Sujet clos
Aller à