在Royalslider上分層顯示圖像在垂直中心位置

我試圖在Royalslider插件上繪製一個徽標。它設置爲100％寬度和靈活寬度以適應響應式佈局。我使用css在Royalslider頂部放置了一個徽標。它的工作原理，但不完全如何我喜歡它。我基本上計算滑塊的當前高度，並將CSS margin-top設置爲該值除以1.5。在Royalslider上分層顯示圖像在垂直中心位置

無論瀏覽器窗口的大小如何，我都希望它能夠垂直居中。這可能嗎？我的數學需要調整嗎？任何想法都表示讚賞。

相關網址：

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")); 
    }) 
});

來源

2013-10-11 Dave Rottino

不是使用CPU密集型jQuery調整大小，而是分別在p和img元素上使用媒體查詢斷點，絕對位置和固定位置。頂部：p元素上的50％和img set per breakpoint上的寬度。

來源

2013-11-02 18:06:46

在Royalslider上分層顯示圖像在垂直中心位置

回答

相關問題