javascript - fullpage.js 垂直对齐问题

标签 javascript html css fullpage.js

我无法让 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

感谢任何形式的帮助,提前致谢

最佳答案

尝试一下,复制粘贴到 html 页面并确保您的 jscss 调用路径正确

<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>
    

关于javascript - fullpage.js 垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39556474/

相关文章:

javascript - 使用滚动从底部追加 div - 聊天应用程序示例

html - 在 div Bootstrap 中居中放置 3 张图像

javascript - 使用 html 或客户端脚本从另一个文本文件导入 <head> 元素

html - 三列布局 - 无 float 对齐

html - MacOS 的邮件程序正在反转我邮件的所有颜色

javascript - 我想按字母顺序生成唯一的字母键 |angularJs

javascript - 我需要更改 cookie 的 javascript 代码。我正在保存输入文本,但我需要保存 div 文本而不是输入文本

javascript - 无法通过 javascript 比较日期

html - div 内的 float div 具有奇怪的间距

javascript - 动态选择最后一个子元素