如何在fullpage.js中垂直居中图像？

Question

I'm building a site using fullpage.js and Foundation. I'm trying to vertically center an image inside of a section and I'm having no luck.

I've tried this:

https://css-tricks.com/centering-in-the-unknown/

I think that the issue has something to do with the fp-tableCell div that fullpage.js creates.

<div id="first-section" class="section sTop active">
        <div id="first-section-row" class="row inner">
            <div id="slide_1_wrapper" class="small-12 medium-6 columns">
                <h1 class="title">Hello!</h1>
                <h2 class="subtitle">My name is Whatever</h2>
            </div>

            <div id="main-picture-wrapper" class="small-12 medium-6 columns">
                <img id="main-picture" src="img/headshot.jpg" alt="my_picture">
            </div>
        </div>
    </div>

I tried the CSS from the article above with no luck:

#main-picture {
    max-height: 400px;
}
#main-picture-wrapper {
    display: inline-block;
    vertical-align: middle;
}

#slide-1-wrapper {
    position: relative;
}
#first-section:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

Screenshot of the rendered html, showing the fp-tableCell

Answer 1

try to add this in html

<div id="page">
       <div id="content_container" class="small-12 medium-6 columns">
               <div id="main-picture-wrapper">
                    <img id="main-picture" src="keyboard_search.png" alt="my_picture">
               </div>
       </div>
</div>

in css

*{ margin:0; padding:0;}
#page{display:table;overflow:hidden;margin:0px auto;}

#content_container{display:table-cell;vertical-align: middle;}

#main-picture-wrapper p{text-align:center;}
html,body{height:100%;}
#page{height:100%;width:100%; max-width:600px; text-align:center;}
.bannerimg{width:100%;max-width:600px;margin:0px auto;}

may help you

Answer 2

By default fullpage.js uses the option verticalCentered:true , so any image you add will be automatically centered unless you change it by using CSS.

You can easily see this in any demo online or in any of the provided examples .

Answer 3

From Michael in the comments:

Try giving the wrapper ID or class position: relative and then the image class or ID position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; - Rough Demo: jsfiddle.net/rrh5c04a