Question

我正在使用从这里http://alvarotrigo.com/fullPage/#secondPage获取的fullPage.js插件。有可能创建垂直幻灯片，但是，当我使用以下HTML代码时，我正在这样做：

<div class="section" id="section2">
        <div class="slide" id="slide1">
        <div id="logocontainer">
            <div class="help1">

                <div id="about_img">
                    London<br>
                    Paris<br>
                    Tokyo<br>
                </div>

                <div id="about_txt">
                    <h2>London</h2>
                    <p>
                    London is the capital city of England. It is the most populous city in the United Kingdom,
                    with a metropolitan area of over 13 million inhabitants.
                    </p>
                    <p>
                    Standing on the River Thames, London has been a major settlement for two millennia,
                    its history going back to its founding by the Romans, who named it Londinium.
                    </p>
                </div>

            </div>
        </div>
    </div>
        <div class="slide" id="slide2">

        <!--    <img src="img/R1.png" alt="a" id="stand-one" /> -->
        </div>

        <div class="slide" id="slide3">
            <h1>Slide 3</h1>
        <!--    <img src="img/R1.png" alt="a" id="stand-one" /> -->
        </div>
    </div>

和css代码：

.help1  #about_img{
    line-height:30px;
    height:660px;
    width:400px;
    float:left; 
    background-color: #eeffaa;
}
.help1 #about_txt{
    height:660px;
    width:500px;
    float:left;      
}
    #logocontainer{
       position: absolute;
       top: 20%;
       margin-top: -35px;/* half of #content height*/
       left: 0;
       width: 100%;
    }
    .help1 {  
       margin:0;
       height: 660px;
       width: 900px;
       background-color: #b0c4de;
    }

div的内容位于slide1的最左侧（感谢margin：0;）。我想将这个div放在幻灯片中，但是当我改变时

.help1 {  
           margin:0;
           height: 660px;
           width: 900px;
           background-color: #b0c4de;
        }

到

.help1 {  
           margin-left:auto;
           margin-right: auto;
           height: 660px;
           width: 900px;
           background-color: #b0c4de;
        }

然后我的div居中，但不是在slide1上，而是在所有幻灯片之间 - 所以既然我现在有三个，我的div就在第二张幻灯片的中间。我想将div放在slide1上，然后将2个其他div放在2个其他幻灯片上 - 这是否可能？

Answer 1

使用幻灯片的相对位置：

.fp-slide{
    position:relative;
}

如何在fullpage.js幻灯片上居中div？

1 个答案: