0

我正在尝试在 Royalslider 插件上添加一个徽标。它设置为 100% 宽度和灵活的宽度以适应响应式布局。我使用 css 在 Royalslider 顶部放置了一个徽标。它有效，但不完全是我想要的。我基本上计算滑块的当前高度，并将 CSS margin-top 设置为该值除以 1.5。

无论浏览器窗口的大小如何，我都希望它垂直居中。这可能吗？我的数学需要调整吗？任何想法表示赞赏。

相关网址：

http://www.bigideaadv.com/big_idea_v2/

当前的 HTML：

<div id="new-royalslider-1" class="royalSlider new-royalslider-1 rsUni rs-default-template" style="width:100%; height:450px;">
    <div class="rsContent">
        <img class="rsImg" src="http://www.bigideaadv.com/big_idea_v2/wp-content/uploads/2013/10/top_slide11-1024x560.jpg" alt="Entemanns slide"/>
    </div>
    <div class="rsContent">
        <img class="rsImg" src="http://www.bigideaadv.com/big_idea_v2/wp-content/uploads/2013/10/top_slide1-1024x560.jpg" alt="PGPF Slide"/>
    </div>
    <div class="rsContent">
        <img class="rsImg" src="http://www.bigideaadv.com/big_idea_v2/wp-content/uploads/2013/10/top_slide3-1024x560.jpg" alt="American Arbitration Association slide"/>
    </div>
    <div class="rsContent">
        <img class="rsImg" src="http://www.bigideaadv.com/big_idea_v2/wp-content/uploads/2013/10/top_slide4-1024x560.jpg" alt="GDLSK slide"/>
    </div>
    <div class="rsContent">
        <img class="rsImg" src="http://www.bigideaadv.com/big_idea_v2/wp-content/uploads/2013/10/top_slide5-1024x560.jpg" alt="uShuttl slide"/>
    </div>
</div>
<p id="floating-logo" class="align-center"><img src="wp-content/themes/skeleton/images/parallax_logo.png" /></p>

当前 CSS（仅适用于 p 标签）：

#floating-logo {
    display: block;
    position: absolute;
    margin: 0 auto 0 auto;
    width: 100%;
    z-index: 3000;
}

#floating-logo img {
    margin: 0 auto 0 auto;
}

Javascript：

jQuery(document).ready(function() {
    offsetHeight = jQuery("#new-royalslider-1").height();
    offsetHeight = 0 - offsetHeight / 1.5;
    //console.log(offsetHeight);

    jQuery("p#floating-logo").css("margin-top", offsetHeight);
    //console.log(jQuery("p#floating-logo").css("margin-top"));

    $(window).resize(function() {
        offsetHeight = jQuery("#new-royalslider-1").height();
        offsetHeight = 0 - offsetHeight / 1.5;
        console.log(offsetHeight);

        jQuery("p#floating-logo").css("margin-top", offsetHeight);
        console.log(jQuery("p#floating-logo").css("margin-top"));
    })
});
4

1 回答 1

0

不是使用 CPU 密集型 jQuery 调整大小，而是分别在 p 和 img 元素上使用媒体查询断点、绝对位置和固定位置。顶部：每个断点设置的 p 元素和 img 上的宽度为 50%。

于 2013-11-02T18:06:46.260 回答