javascript - how to center div on a fullpage.js slide? -
i'm using fullpage.js plugin taken here http://alvarotrigo.com/fullpage/#secondpage . there possibility create vertical slides , i'm doing so, however, when use 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 capital city of england. populous city in united kingdom, metropolitan area of on 13 million inhabitants. </p> <p> standing on river thames, london has been major settlement 2 millennia, history going founding romans, named 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>
and 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; }
my content of div @ left site of slide1 (thanks margin: 0;). center div inside slide, when change
.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; }
then div centered, not on slide1, between slides - since have 3 of them now, div in middle of second slide. center div on slide1 , center 2 other divs on 2 other slides - possible?
use relative position slide:
.fp-slide{ position:relative; }
Comments
Post a Comment