Центрирование содержимого DIV в окне просмотра - PullRequest
1 голос
/ 21 июля 2010

Я пытаюсь создать карусель, похожую на http://www.aprica.jp/,, используя jQuery и HTML. Для этого мне нужно иметь возможность горизонтально центрировать содержимое большого (скрытого переполнением) элемента div в области просмотра. Есть идеи, как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 21 июля 2010

Хорошо, Базз, если я понимаю, вам нужен способ центрировать div внутри другого div'а с переполнением: скрытый.Я полагаю, вы не знаете заранее ширину внутреннего div.Итак, вы хотите использовать JQuery, а не вычислять левое поле внутреннего div следующим образом:

<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>

Это очень простой случай, если вам нужно больше, спросите.

PS: вам нужны JQuery и JQuery.UI.

0 голосов
/ 21 июля 2010

Вы можете центрировать div по горизонтали с помощью:

/*CSS*/
#divtocenter {
    width: 400px;
    margin: 0 auto; /*that's it*/
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...