11548 sujets

JavaScript, DOM et API Web HTML5

Centrage vertical et horizontale dans un div

Bonjour,

Je bute sur un tout petit problème. J'ai une div dans laquelle je veux faire un slideshow d'images.
Pour cela, j'utilise la librairie jQuery (en version 1.5) et le plugin Cycle

Je souhaite que les images qui défilent soient centrées verticalement et horizontalement dans le div "slideshow".

Voici le XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
		<title>Test</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="all" />
		<script type="text/javascript" src="jquery-1.5.js"></script>
		<script type="text/javascript" src="cycle.min.js"></script>
		<script type="text/javascript"> 
			$(document).ready( function () { 
				
				$('#slideshow').cycle('fade');
			} ) ; 
		</script>    
	</head>
	
	<body>
		<div id="page">

<!-- Slideshow HTML -->
<div id="slideshow">
      <img src="IMG/IMG1.JPG" alt="" />
      <img src="IMG/IMG2.JPG" alt="" />
      <img src="IMG/IMG3.JPG" alt="" />
      <img src="IMG/IMG4.JPG" alt="" />
</div>
<!-- Slideshow HTML -->
		</div>
	</body>
</html>


et le CSS
html { margin: 0px; padding: 0px;}
body { background: url(fond.png); }
#page {
	border-left: 2px solid #ececec;
	border-right: 2px solid #ececec;
	width: 75%;
	margin: 0 auto 0 auto;
	padding: 0px;
}
.nettoyeur { clear: both; }


#slideshow {
	display: table-cell;
	text-align:center;
	vertical-align:middle;
	border:1px solid #fff;
	width: 820px;
	height: 620px;
}


Autant sans jQuery et le slideshow j'arrive à mes fins (centrage vertical et horizontal) mais dès que je rajoute les effets jQuery et de slideshow, mes images sont plantées en haut à gauche de mon div.

Bien sur, les images du slide n'ont pas forcément les mêmes dimensions !!!

Si plutôt que le plugin cycle, il faut utiliser une autre méthode, cela me dérange pas !
Modifié par elekaj34 (23 Feb 2011 - 18:26)
C'est normal, les slideshows vont passer l'affichage de tes éléments en display block et position absolute/relative pour pouvoir animer les éléments. Je n'en connais pas qui fonctionne autrement.
Pour le centrage horizontal, j'ai finalement trouvé la solution.

Voici le XHTML :

<div id="slideshow">
	  <div class="slide"><img src="IMG/IMG1.JPG" alt="" /></div>
	  <div class="slide"><img src="IMG/IMG2.JPG" alt="" /></div>
	  <div class="slide"><img src="IMG/IMG3.JPG" alt="" /></div>
	  <div class="slide"><img src="IMG/IMG4.JPG" alt="" /></div>
</div>


et pour le CSS :
#slideshow, .slide {
	margin: auto;
	width: 800px;
	height: 600px;
}
.slide img { display: block; margin: auto; border:10px solid #fff; }

Source : http://www.mail-archive.com/jquery-en@googlegroups.com/msg66257.html

Mais cela ne résoud pas mon problème de centrage vertical Smiley decu
Ben au pire tu prends le plug-in cycle lite (vu que apparemment tu n'utilises que la transition "fade") et tu le modifies comme ça :

Tu cherches ce bout de code :


        $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { 
            $(this).css('z-index', els.length-i) 
        });


Et tu le remplaces par :

        var cont_w = $cont.width();
        var cont_h = $cont.height();        
        $slides.hide().each(function(i) { 
					x = Math.floor((cont_w - $(this).width()) / 2);
					y = Math.floor((cont_h - $(this).height()) / 2);
					$(this).css({position: 'absolute', top:y, left:x, 'z-index':els.length-i});
        });


Et voilà Smiley langue
Modifié par jb_gfx (24 Feb 2011 - 11:17)
Sujet clos
Aller à