Onur Atalay Onur Atalay - 6 months ago 34
CSS Question

fullpage.js vertical align issue

i cannot get fullpage.js vertically align any content i give. first i tried to implement it on an existing code but afterwards i just opened anew and tried to put it in just as simple as:

<div id="fullpage">
<div class="section">
<div class="first">
<img src="img/logo.svg" alt="">
<div class="section">b</div>
<div class="section">c</div>
<div class="section">d</div>
<script src="js/jquery.min.js"></script> <!-- Jquery -->
<script src="js/bootstrap.min.js"></script> <!-- bootstrap js -->
<script src="js/jquery.fullPage.js"></script> <!-- Jquery FullPage-->
<script src="js/main.js"></script> <!-- Site Library -->

my css dependencies are simple : reset.css, bootstrap and animate.css

i appreciate any kind of help, thanks in advance


Try with this, copy paste to a html page and make sure your js and css calling path is right


$(document).ready(function() {
		sectionsColor: ['#999', '#666', '#262626', '#000'],
		navigation: true,
		verticalCentered: true,
		navigationPosition: 'right',
		navigationTooltips: ['About', 'Security', 'Industries', ' security', 'footer'],

body {
	float: left;
	width: 100%;
	padding-bottom: 0px;
* {
<link rel="stylesheet" href="css/jquery.fullPage.css" >

<div id="fullpage">
  <div class="section" id="section0">
    	<span class="middle">Vertical align</span>
  <div class="section" id="section1">
  	<span class="middle">b</span>
  <div class="section" id="section2">
  	<span class="middle">c<span>
  <div class="section" id="section3">
  <span class="middle">d</span>

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