jQuery elements cannot be vertically centered when loading

Question

I have this code running perfectly on jsfiddle but when I code in dreamweaver and preview in Chrome (and other browsers), the central div (the 3 images with the testing) is not vertically centralized when loading. Only when I scale the browser window it centers itself properly as i had expected..

Can anyone help? Thanks!

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

Probably because it doesn't have height etc yet because it's fired on DOM ready rather than window load. This might help: http://stackoverflow.com/questions/10778070/window-onload-vs-document-ready-jquery/10778083#10778083 — ahren, Apr 04 '13 at 06:19
Fwiw, you should save a reference to `$(window)` at the top of your script, so you don't make a jQuery object over and over again. Something like `$window = $(window); // rest of code uses $window` — Impirator, Apr 04 '13 at 06:23

score 0 · Accepted Answer · edited May 23 '17 at 12:13

Try this, you should put your code into a named function, then call the function.

For example:

function onResize() { ... }

then

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

or

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

Read more: jQuery resize function doesn't work on page load

score 0 · Answer 2 · answered Apr 04 '13 at 06:31

try this

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

@NamPham : If it's as per your expectation, than you should mark it as answer. — IT ppl, Apr 04 '13 at 06:39

jQuery elements cannot be vertically centered when loading

2 Answers2