Question

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

Answer 1

Ok Buzz，如果我理解你需要一种方法来将div放在另一个'overflow：hidden'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。

Answer 2

您可以使用以下内容水平居中div：

/*CSS*/
#divtocenter {
    width: 400px;
    margin: 0 auto; /*that's it*/
}

将DIV内容居中到视口

2 个答案: