加载时jQuery元素不能被垂直居中

Question

我有这段代码在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> 

SCRIPT

$(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%; 
} 

Answer 1

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

例如：

function onResize() { ... } 

然后

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

或

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

了解更多：jQuery resize function doesn't work on page load

Answer 2

试试这个

现场小提琴here

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