fullpage.js 垂直对齐问题

Question

我无法让 fullpage.js 垂直对齐我提供的任何内容。首先，我尝试在现有代码上实现它，但后来我重新打开并尝试将其简单地放入：

<body>
    <div id="fullpage">
        <div class="section">
            <div class="first">
                <img src="img/logo.svg" alt="">
            </div>              
        </div>
        <div class="section">b</div>
        <div class="section">c</div>
        <div class="section">d</div>
    </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 -->
</body>

我的 css 依赖项很简单：reset.css、bootstrap 和 animate.css

感谢任何形式的帮助，在此先感谢

Answer 1

试试这个，复制粘贴到 html 页面并确保你的 js 和 css 调用路径是正确的

<script>

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


</script>

body {
 float: left;
 width: 100%;
 padding-bottom: 0px;
}
* {
 color:#F00;
 text-align:center;
 font-size:30px;
}

<link rel="stylesheet" href="css/jquery.fullPage.css" >

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

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

fullpage.js 垂直对齐问题

fullpage.js vertical align issue

html

javascript

css

fullpage.js