Question

我使用fullpage.js和Foundation构建网站。我试图将一个图像垂直居中于一个部分，我没有运气。

我试过这个：

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

我认为这个问题与fullpage.js创建的fp-tableCell div有关。

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

我从上面的文章中尝试了CSS而没有运气：

#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

尝试在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>

在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;}

可以帮到你

Answer 2

默认情况下，fullpage.js使用选项verticalCentered:true，因此您添加的任何图片都将自动居中，除非您使用CSS进行更改。

您可以在任何demo online或任何the provided examples中轻松看到此内容。

Answer 3

来自Michael的评论：

尝试给出包装器ID或类位置：relative，然后是图像类或ID位置：absolute;顶部：0;左：0;右：0;底部：0;保证金：自动; - 粗略演示：jsfiddle.net/rrh5c04a

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

3 个答案: