J'essaie de créer un carrousel similaire à http://www.aprica.jp/, en utilisant jQuery et HTML. Pour ce faire, je dois pouvoir centrer horizontalement le contenu d'un grand div (overflow caché) vers la fenêtre. Des idées comment je peux faire ça?Center DIV contenu à viewport
Ok Buzz, si je comprends que vous avez besoin d'un moyen de centrer une div dans un autre 'overflow: hidden' div. J'imagine que vous ne connaissez pas à l'avance la largeur de la div interne. Vous Sead que vous voulez utiliser JQuery que ous devez calculer la marge gauche de la div intérieure avec quelque chose comme ceci:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#div2').draggable();
var halfScreen = $('#div2').parent().width()/2;
var left = ($('#div2').width()/2)-halfScreen;
$('#div2').css("left", (-left)+"px");
});
//-->
</script>
<style>
body {
margin: 0;
padding: 0;
}
#div1{
width: 100%;
height: 300px;
margin: 80px 0;
padding: 0;
background: red;
overflow: hidden;
}
#div2{
width: 300%;
height: 100px;
margin: 100px 0;
padding: 0;
background: #ddd;
}
#div3{
width: 50%;
height: 100px;
margin: 0;
padding: 0;
background: #aaa;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
C'est un cas très simple, si vous avez besoin de plus, s'il vous plaît demander. PS: vous avez besoin de JQuery et JQuery.UI
PS: vous avez besoin de JQuery et JQuery.UI.
Fantastique - exactement ce que je cherchais. Je pense que j'essayais de compliquer le problème, simple était la clé :) – Buzz
Vous pouvez centrer horizontalement un div avec:
/*CSS*/
#divtocenter {
width: 400px;
margin: 0 auto; /*that's it*/
}
un div qui s'insère dans l'écran oui, mais pas un '' grande div ... – galambalazs
(caché débordement) Je ne Je ne te comprends pas. je peux définir le débordement: caché; dans ce div trop – fabrik
je cherche à centrer horizontalement le contenu d'un DIV à 100% de largeur (même si le contenu est de 5000px de large). Par exemple, en supposant que l'UL ci-dessous soit une UL très grande, li '3' serait centré sur mon écran (comme l'élément central), et tout ce qui est à gauche ou à droite disparaîtrait de ma vue (débordement caché). | 1 | 2 | 3 | 4 | 5 | – Buzz
Vous pouvez utiliser Jcarousel - http://sorgalla.com/projects/jcarousel/ – Krunal