I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code:
<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>
Along with the accompanying CSS code:
.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;
}
Upon attempting to center the contents of the div within 'slide1', I encountered a challenge with positioning. Adjusting the CSS from:
.help1 {
margin:0;
height: 660px;
width: 900px;
background-color: #b0c4de;
}
To:
.help1 {
margin-left:auto;
margin-right: auto;
height: 660px;
width: 900px;
background-color: #b0c4de;
}
Resulted in the div being centered between slides instead of the desired center within 'slide1'. Is there a possibility to achieve the desired centering on individual slides while maintaining the vertical slide functionality?