Javascript 尝试创建使用动画表单切换的登录页面，但表单未正确对齐

所以，我一直在尝试创建一个需要用户登录的webapp。我采用了我发现的这个想法，即使用动画形式切换尝试使用相同的方法，但我的框会向左对齐（定义为活动的框除外）。 页面加载居中时定义为活动的表单，但当我通过单击链接切换表单时，对齐丢失。我正在使用jQueryUI1.9.2

这是我到目前为止的代码。对于下面相同的代码。 我想让表单始终居中，但我一直无法找出为什么不会发生这种情况。我对网络开发有点陌生。任何帮助都将不胜感激

HTML:

CSS:

添加到您的CSS中：

.form_wrapper {
    margin:0 auto;
}

$(function () {
    //the form wrapper (includes all forms)
    var $form_wrapper = $('#form_wrapper'),
        //the current form is the one with class active
        $currentForm = $form_wrapper.children('form.active'),
        //the change form links
        $linkform = $form_wrapper.find('.linkform');

    //get width and height of each form and store them for later                        
    $form_wrapper.children('form').each(function (i) {
        var $theForm = $(this);
        //solve the inline display none problem when using fadeIn fadeOut
        if (!$theForm.hasClass('active')) $theForm.hide();
        $theForm.data({
            width: $theForm.width(),
            height: $theForm.height()
        });
    });

    //set width and height of wrapper (same of current form)
    setWrapperWidth();

    /*
                clicking a link (change form event) in the form
                makes the current form hide.
                The wrapper animates its width and height to the 
                width and height of the new current form.
                After the animation, the new form is shown
                */
    $linkform.bind('click', function (e) {
        var $link = $(this);
        var target = $link.attr('rel');
        $currentForm.fadeOut(400, function () {
            //remove class active from current form
            $currentForm.removeClass('active');
            //new current form
            $currentForm = $form_wrapper.children('form.' + target);
            //animate the wrapper
            $form_wrapper.stop()
                .animate({
                width: $currentForm.data('width') + 'px',
                height: $currentForm.data('height') + 'px'
            }, 500, function () {
                //new form gets class active
                $currentForm.addClass('active');
                //show the new form
                $currentForm.fadeIn(400);
            });
        });
        e.preventDefault();
    });

    function setWrapperWidth() {
        $form_wrapper.css({
            width: $currentForm.data('width') + 'px',
            height: $currentForm.data('height') + 'px'
        });
    }
});

.loginBox {
    border: 1px solid #a1a3a3;
    border-radius: 2px;
}
.textInBox {
    color: #7f7f7f;
    display: inline-block;
    float: right;
    font: 10px/1 sans-serif;
    left: -29px;
    position: relative;
    text-decoration: none;
    top: 10px;
    transition: color .8s;
}

.form_wrapper {
    margin:0 auto;
}