javascript - 如何在 fullpage.js 幻灯片上居中 div?

标签 javascript jquery html css fullpage.js

我正在使用取自此处 http://alvarotrigo.com/fullPage/#secondPage 的 fullPage.js 插件.有可能创建垂直幻灯片,我正在这样做,但是,当我使用以下 html 代码时:

<div class="section" id="section2">
        <div class="slide" id="slide1">
        <div id="logocontainer">
            <div class="help1">

                <div id="about_img">
                    London<br>
                    Paris<br>
                    Tokyo<br>
                </div>

                <div id="about_txt">
                    <h2>London</h2>
                    <p>
                    London is the capital city of England. It is the most populous city in the United Kingdom,
                    with a metropolitan area of over 13 million inhabitants.
                    </p>
                    <p>
                    Standing on the River Thames, London has been a major settlement for two millennia,
                    its history going back to its founding by the Romans, who named it Londinium.
                    </p>
                </div>

            </div>
        </div>
    </div>
        <div class="slide" id="slide2">

        <!--    <img src="img/R1.png" alt="a" id="stand-one" /> -->
        </div>

        <div class="slide" id="slide3">
            <h1>Slide 3</h1>
        <!--    <img src="img/R1.png" alt="a" id="stand-one" /> -->
        </div>
    </div>

和CSS代码:

.help1  #about_img{
    line-height:30px;
    height:660px;
    width:400px;
    float:left; 
    background-color: #eeffaa;
}
.help1 #about_txt{
    height:660px;
    width:500px;
    float:left;      
}
    #logocontainer{
       position: absolute;
       top: 20%;
       margin-top: -35px;/* half of #content height*/
       left: 0;
       width: 100%;
    }
    .help1 {  
       margin:0;
       height: 660px;
       width: 900px;
       background-color: #b0c4de;
    }

我的 div 内容位于 slide1 的最左侧(感谢 margin: 0;)。我想将这个 div 放在幻灯片的中心,但是当我改变时

.help1 {  
           margin:0;
           height: 660px;
           width: 900px;
           background-color: #b0c4de;
        }

.help1 {  
           margin-left:auto;
           margin-right: auto;
           height: 660px;
           width: 900px;
           background-color: #b0c4de;
        }

然后我的 div 居中,但不是在 slide1 上,而是在所有幻灯片之间 - 所以因为我现在有三张幻灯片,所以我的 div 位于第二张幻灯片的中间。我想将 div 置于 slide1 的中心,然后将其他 2 个 div 置于另外 2 张幻灯片的中心 - 这甚至可能吗?

最佳答案

使用幻灯片的相对位置:

.fp-slide{
    position:relative;
}

关于javascript - 如何在 fullpage.js 幻灯片上居中 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29865860/

相关文章:

html - 在 react 中使用 flex 对齐框时出现问题

javascript - <sup> 标签在 WordPress 中不起作用

html - 在 Bootstrap col 中定位绝对项

javascript - 使用 C# 将数组注册到 JavaScript

javascript - 浏览器中 100% 宽度的视频的不同高度

javascript - 获取javascript的周围元素

javascript - 获取 tablerow 中的按钮 rowIndex

javascript - 如何在 javascript 中以 unix 格式获取昨天的日期?

javascript - jQuery zClip 复制到剪贴板,用于引导下拉列表中的多个链接?

javascript - 用户选择选项未使用 jQuery 更新