CODEWITHSUNDEEP
fullpage.js
zepp133
zepp133

Reputation: 1610

Vertically centering content with fullpage.js

According to the fullpages.js documentation, it should be possible to vertically center the contents of .sections with the parameter verticallyCentered (which defaults to true).

However, I can't get this feature to work with the following HTML structure:

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

The content of the .col-xs-12 div (i.e. the heading) remains at the top of the window.

I am using Bootstrap for scaffolding (if that is of any relevance). Also, the basic functionality of fullpage.js (i.e. the single-page scrolling) is working without any problems.

Upvotes: 3

Views: 8814

Answers (4)

Petya
Petya

Reputation: 51

I had the same issue. I fixed it by styling the default class, added by fullpage.js:

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

Upvotes: 2

Alvaro
Alvaro

Reputation: 41605

You are probably using some absolute positioned element and that's the reason why fullpage.js can not deal with it.

You can easily see in the examples that fullpage.js centers the content correctly when using verticalCentered:true, which is the default value.

Upvotes: 3

Roi
Roi

Reputation: 565

Sorry to resurrect this question but the problem is that you didn't include the css file of FullPage.js

Upvotes: 1

zepp133
zepp133

Reputation: 1610

Since I couldn't get the vertical centering functionality to work, I ended up disabling it by setting verticalCentered to false. As a replacement I am now using jQuery-Flex-Vertical-Center which works out of the box.

Upvotes: 1

Related Questions