Home/ Questions/Q 6850393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:07:08+00:00

Not being a web guy I don’t know all the quirks of HTML. I

  • 0

Not being a web guy I don’t know all the quirks of HTML. I am attempting to center some dynamically sized content inside of a div. This content should always be centered, so I hooked into window.resize to do it. I then manually call window.resize() after applying the CSS to force it to run once.

The problem is that the div does not center horizontally at first, only vertically. Subsequent window resizes force the div to center properly.

Initially I thought that I must be trying to center the div before it was ‘ready’ as I am calling it first before document.ready fires, but the vertical centering works and I added some trace statements and, sure enough, the left position is being calculated correctly, just not applied (seemingly).

Anyway, this is my first real foray into HTML+CSS, so I’m sure you guys will nail it quickly. Here is some sample html and javascript which reproduces the problem.

Also, my testing has been in Chrome exclusively thus far.

<html lang="en-US">
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>         
        <script type="text/javascript">     
            $(function() {
                $(window).resize(function() {
                    var win = $(window);
                    var area = $('#signuparea');
                    $('#signuparea').css({
                        position: 'absolute',                       
                        left: (win.width() - area.outerWidth()) / 2,
                        top: (win.height() - area.outerHeight()) / 2
                    });

                    //$('body').append('<div>l=' + ((win.width() - area.outerWidth()) / 2) + '</div>');                     
                    //$('body').append('<div>w=' + area.outerWidth() + '</div>');
                    //$('body').append('<div>h=' + area.outerHeight() + '</div>');
                });

                $(window).resize();
            });
        </script>
    </head>
    <body style="background-color:0000FF">
            <div id="signuparea">           
                <input type="password">
            </div>      
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What about using this code in your window.resize event handler:

    $('#signuparea').css({
    position      : 'absolute',                       
    left          : '50%',
    top           : '50%',
    'margin-top'  : '-' + Math.round(area.height() / 2) + 'px',
    'margin-left' : '-' + Math.round(area.width() / 2) + 'px'
});

    Since three of the properties set above are static they can be set in CSS:

    #signuparea {
    position : absolute;
    top      : 50%;
    left     : 50%;
}

    Which makes your JS look like this:

    $(function() {
    $(window).resize(function() {
        var area = $('#signuparea');
        $('#signuparea').css({
            'margin-top'  : '-' + Math.round(area.height() / 2) + 'px',   
            'margin-left' : '-' + Math.round(area.width() / 2) + 'px',       
        });
    }).trigger('resize');
});

    Here is a jsfiddle of this solution: http://jsfiddle.net/jasper/Ty6Af/2/

    • 0