javascript - 让侧面内容始终 float 在中心？

Question

如何使幻灯片内容始终 float 在右侧垂直居中？这样当内容太长时幻灯片总是位于中心？

这是屏幕截图。

我正在使用这个jscrpt

<script>
                    function toggleDiv(divNum) {

                        $("#close").hide();
                        $("#center-content").removeClass("width-400px");
                        $("#right-content").animate({
                                right: '-400'
                            }, 350,
                            function() {
                                $("#center-content").addClass("width-400px");
                                $(".slide").hide();
                                if ($("#div" + divNum)) {
                                    $("#div" + divNum).show();
                                }
                                $("#right-content").animate({
                                        right: '0'
                                    }, 350,
                                    function() {
                                        $("#close").show();

                                    });
                            });
                    }

                    $(document).ready(function() {
                        $("#close").on("click", function(e) {
                            $("#right-content").animate({
                                right: '-400'
                            }, 350);
                            $("#center-content").removeClass("width-400px");
                            $(this).hide()
                        })

                    })
                </script>

这是我的 CSS

.slide {
        width: 400px;
        height: 100%;
        position: absolute;
        #right: -400px;
        background: #6b4788;
    }
    #close {
        position: absolute;
        left: 0;
        bottom: 0;
        color: white;
        font-size: 28px;
        font-family: ovo;
        z-index: 10;
        letter-spacing: 5px;
        font-weight: 100;
        padding: 43px 104px 34px 116px;
        background: #4d3065;
    }
    body {
        overflow: hidden;
    }
    #main-content {
        position: absolute;
        width: 100%;
    }
    #right-content {
        position: absolute;
        right: -400px;
        top: 0;
        overflow: hidden;
        width: 400px;
        height: 100%;
    }

这里调用Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-content">
    <div id="">
        <center>
            <div id="furugganan">
                <center><img src="furugganan-logo.png">
                </center>
                <div id="container">
                    <div id="firstrow">
                        <a onClick="toggleDiv(1)"><img src="alfonsoponce-a.png" id="alfonso">
                        </a>
                        <a onClick="toggleDiv(2)"><img src="female-a.png" id="female" style="margin-left: 30px;">
                        </a>
                    </div>
    </div>

正确的内容:

    <div id="right-content">
                    <div id="close">CLOSE (X)</div>
                    <div class="slide" id="div1">
                        <center>
                            <img src="crest.png" style="
    /* z-index: -1; */
    opacity: 0.1;
    position: absolute;
    left: 39px;
    top: 371px;
    height: 354px;
">
                            <img src="sample-pic.png" style="height: 262px; margin-top: 12%;">
                            <h3>ALFONSO PONCE ENRILE</h3>
                            <hr style="width: 90px;margin-top: -7px;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti.</p>
                            <hr style="width: 90px;margin-top: 22px;">
                            <h1 style="margin-top: 30px;">LOREM: 1</h1>
                            <h1>LOREM: 2</h1>
                            <h1>LOREM: 3</h1>
                            <h1>LOREM: 4</h1>
                            <h1>LOREM: 5</h1>

                    </div>
</div>

Answer 1

Try this:

/*This is the element which holding the side content
  by giving the property of overflow, it lets you 
  float the side element without affecting the content 
  flow*/

.container-of-side{    
    margin: 0 auto; 
    width: 950px; 
    overflow: auto; 
}

.side{
    float: left;  /*then float the element*/
 }