0

我让这段代码在 jsfiddle 上完美运行，但是当我在 Dreamweaver 中编写代码并在 Chrome（和其他浏览器）中预览时，加载时中央 div（带有测试的 3 个图像）不是垂直集中的。只有当我缩放浏览器窗口时，它才会像我预期的那样正确居中..

任何人都可以帮忙吗？谢谢！

http://jsfiddle.net/nampham/v6HLT/

HTML

<!--menu-->
<a href="#" id="logo"><b>bitchism<br>.</b></a>
<a href="#" id="projects"><b>projects<br>.</b></a>
<a href="#" id="writings"><b>writings<br>.</b></a>
<a href="#" id="contact"><b>.<br>contact</b></a>
<!--menu-->

<div id="first">
<img src="image/circle.gif" style="width:30%;display:inline-block"/> 
<img src="image/cloud3.gif" style="width:30%;display:inline-block"/> 
<img src="image/circle2.gif" style="width:30%;display:inline-block"/>
<br />Testing
</div>

脚本

$(document).ready(function(){

$(window).resize(function(){


    $('#projects').css({
        position:'fixed',
        top: ($(window).height() - $('#projects').outerHeight())/2
    });

    $('#writings').css({
        position:'fixed',
        top: ($(window).height() - $('#writings').outerHeight())/2
    }); 

    $('#logo').css({
        position:'fixed',
        left: ($(window).width() - $('#logo').outerWidth())/2
    });

    $('#contact').css({
        position:'fixed',
        left: ($(window).width() - $('#contact').outerWidth())/2
    });

    $('#first').css({
        position:'fixed',
        top: ($(window).height() - $('#first').outerHeight())/2,
        left: ($(window).width() - $('#first').outerWidth())/2
    });

});

$(window).resize();

});


body
{
background-color:#FFF;
background-image:url(image/dot.png);
background-repeat:repeat;
font-family: 'VT323', cursive;
text-align:center;  
}


a{
text-decoration:none;
color:#F00;
font-size: 20px;
}

a:hover{
text-decoration:underline;
}

a:active{
text-decoration:line-through;
color:#F00;
}


#logo
{
position:fixed;
left:50%;
top:0;
padding-top:10px;
}



#contact
{
position:fixed;
left:0;
bottom:0;
padding-bottom:10px;    
}


#projects
{
position:fixed;
left:0;
top:50%;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */"

}

#writings
{
position:fixed;
right:0;
top:50%;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg);  /*Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

#first
{
position:fixed;
top:50%;
    left:50%;
}
4

2 回答 2

0

试试这个，你应该把你的代码放到一个命名函数中，然后调用这个函数。

例如：

function onResize() { ... }

然后

$(document).ready(function(){
    $(onResize);
    $(window).resize(onResize);
});

或者

$(document).ready(function(){
    $(window).load('resize', onResize);
    $(window).bind('resize', onResize);
});

阅读更多：jQuery 调整大小功能在页面加载时不起作用

于 2013-04-04T06:23:54.723 回答
0

试试这个

在这里生活小提琴

    function center_div(){
            $('#projects').css({
            position:'fixed',
            top: ($(window).height() - $('#projects').outerHeight())/2
        });

        $('#writings').css({
            position:'fixed',
            top: ($(window).height() - $('#writings').outerHeight())/2
        }); 

        $('#logo').css({
            position:'fixed',
            left: ($(window).width() - $('#logo').outerWidth())/2
        });

        $('#contact').css({
            position:'fixed',
            left: ($(window).width() - $('#contact').outerWidth())/2
        });

        $('#first').css({
            position:'fixed',
            top: ($(window).height() - $('#first').outerHeight())/2,
            left: ($(window).width() - $('#first').outerWidth())/2
        });
    }

$(window).load(center_div);
$(window).resize(center_div);
于 2013-04-04T06:31:08.517 回答