我正在使用取自此处 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 张幻灯片的中心 - 这甚至可能吗?
最佳答案
使用幻灯片的相对位置:
.fp-slide{
position:relative;
}
关于javascript - 如何在 fullpage.js 幻灯片上居中 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29865860/