Question

我正在尝试使用此模板构建一个目前为16000像素的横向网站

http://tympanus.net/Tutorials/WebsiteScrolling/

该网站有四个4000px宽的部分，我试图在每个部分的浏览器视口中实现一个div。

垂直方向，50％有效，但水平50％将是2000px进入页面。

有没有人知道任何有用的东西？

我找到了一个脚本，用于将我的#verycentre Div放在首页上，它不是4000px的50％，它的浏览器窗口看起来很棒。

我现在遇到的问题是我需要在每个部分锚点都有一个居中的窗口div。

当页面滚动并点击每个部分时，我试图为每个部分实现可调整大小的#verycentre Div。

我目前正在使用的代码发布在下面，适用于第1部分中第一个居中的div。

我认为问题可能是函数调用是document.ready

当时窗口中只有一个#verycentred div，但不是100％肯定。

如何让每个锚点处的所有#verycentred Div都居中/可居住？

感谢

Answer 1

由于你的宽度会偏移窗口区域，因此通过CSS将它居中是一个问题所以你可以使用的是一个JQuery函数，它可以帮助你根据窗口位置居中这个div

看看这篇文章，他们解释了如何根据窗口区域显示来居中对象。

Using jQuery to center a DIV on the screen

Answer 2

您可以使用负左边距设置位置：relative;

div{
 position:relative;
 left: 50%;
 margin-left: -2000px;
}

Answer 3

<script type="text/javascript">
$(document).ready(function() {
function move_div() {
    window_width = $(window).width() ;
    window_height = $(window).height() ;    

    obj_width = $('#verycentre') .width() ;
    obj_height = $('#verycentre') .height() ;

    $('#verycentre').css('top', (window_height / 2) - (obj_height / 2)) .css('left',       (window_width /2) - obj_width / 2);
    }

    move_div() ;

$(window) .resize(function() {
move_div() ;

});

}) ;
</script>

以大型网站为中心的视口

3 个答案: