1

我正在尝试使用 jQuery 和 HTML创建一个类似于http://www.aprica.jp/的轮播。为此，我需要能够将大（溢出隐藏）div 的内容水平居中到视口。任何想法我该怎么做？

4

2 回答 2

0

好的 Buzz，如果我了解您需要一种方法将 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。

于 2010-07-21T13:00:39.770 回答
-1

You can horizontally center a div with:

/*CSS*/
#divtocenter {
    width: 400px;
    margin: 0 auto; /*that's it*/
}
于 2010-07-21T09:41:03.873 回答