Question

根据 fullpages.js 文档，应该可以使用参数.section（默认为verticallyCentered垂直居中true s的内容。 }）。

但是，我无法使用以下HTML结构来使用此功能：

<div id="content">
    <div class="section container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="title">Title</h1>
            </div>
        </div>
    </div>
</div>

.col-xs-12 div的内容（即标题）仍然位于窗口的顶部。

我正在使用Bootstrap进行脚手架（如果有任何相关性）。此外，fullpage.js的基本功能（即单页滚动）工作没有任何问题。

Answer 1

你可能正在使用一些绝对定位的元素，这就是为什么fullpage.js无法处理它。

使用verticalCentered:true（这是默认值）时，您可以轻松地看到in the examples fullpage.js正确居中内容。

Answer 2

我有同样的问题。我通过设置默认类来修复它，由fullpage.js添加：

.fp-tableCell {
 display: flex;
 align-items: center;
 justify-content: center;
}

Answer 3

由于我无法使垂直居中功能正常工作，我最终通过将verticalCentered设置为false来禁用它。作为替代品，我现在正在使用jQuery-Flex-Vertical-Center开箱即用。

Answer 4

很抱歉重新提出这个问题，但问题是你没有包含FullPage.js的css文件

使用fullpage.js垂直居中内容

4 个答案: