如何浮動div垂直中心對齊在另一個div

我有一個幻燈片。我也有一個上一個和下一個按鈕。幻燈片將根據顯示的屏幕尺寸重新調整尺寸。我需要上一個和下一個按鈕始終處於幻燈片放映的中心。如果我添加position: absolute;它在大屏幕上看起來不正確。如何浮動div垂直中心對齊在另一個div

HTML：

<div class="slideshow" style="position: relative;"> 
    </div> 
    <div id="prev"></div> 
    <div id="next"></div>

CSS：

#prev, #next 
{ 
    position: absolute; 
    z-index: 20; 
    width: 41px; 
    height: 80px; 
    cursor: pointer; 
    top: 300px; 
} 

#prev 
{ 
    left: 0; 
    background-image: url("img/prev.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 

#next 
{ 
    right: 0; 
    background-image: url("img/next.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
}

來源

2012-11-16 Beginner

你有沒有試過機頂盒：50％？ –

你好@Beginner請展示更多代碼...... –

是的，我已經將它設置爲50％，但它的頁面不是幻燈片的50％ – Beginner

<div id="prev"></div> 
<div id="next"></div>

這些應該是內部

<div class="slideshow" style="position: relative;"> 
</div>

，然後裏面的CSS

#prev, #next{position:absolute;top:50%}

我希望這將解決您的問題

來源

2012-11-16 09:22:37

我看到它沒有定位正確，因爲

<div id="prev"></div> 
    <div id="next"></div>

可是沒有一個包裝什麼都有相對的位置上，我看到了幻燈片顯示，將其放在裏面並且位置應該很好

這

<div class="slideshow" style="position: relative;"> 
    </div> 
    <div id="prev"></div> 
    <div id="next"></div>

這個

<div class="slideshow" style="position: relative;"> 
    <div id="prev"></div> 
    <div id="next"></div> 
</div>

來源

2012-11-16 09:15:34

我會給這個去，如果我有瀏覽器說一個27英寸的屏幕，並有頂部設置爲300px，看起來集中在我的屏幕，它會看起來集中在更大的屏幕 – Beginner

是的，因爲當你和絕對位置你需要用一個包裝器來包裝它的相對位置，所以如果包裝器元素有相對變化，那麼apsolute將會保持你想要的狀態 –

如果我需要從幻燈片的底部開始10％的東西，我會做相同？ – Beginner

試試這個，你應該調整的CSS位，特別是利潤率左使它們並排適當

演示Demo

看側

#prev 
{ 
    position: absolute; 
    z-index: 20; 
    width: 41px; 
    height: 80px; 
    cursor: pointer; 
    top: 50%; 
    left : 50%; 
    margin-left:0px; 
    margin-top:-40px; 
} 

#next 
{ 
    position: absolute; 
    z-index: 20; 
    width: 41px; 
    height: 80px; 
    cursor: pointer; 
    top: 50%; 
    left : 50%; 
    margin-left:-60px; 
    margin-top:-40px; 
}

來源

2012-11-16 09:20:23

我需要他們居中垂直不水平 – Beginner

你看了演示。它的中心既垂直又水平。 –

I假設幻燈片顯示爲全屏，因爲prev/next元素不在幻燈片中。

http://jsfiddle.net/kudoslabs/aFJze/

你需要的頂部位置爲50％，抵消了錨的高度。

#prev, #next{ 
top: 50%; 
margin-top: -20px ; /*half the height of the element, assuming 40px*/ 
}

來源

2012-11-16 09:21:37 Kudos

我希望你是這樣看： - DEMO

HTML

<div id="slideshow"> 
    <div id="prev"></div> 
    <div id="next"></div> 
</div>

CSS

#slideshow { 
    position: relative; 
    border:1px solid red; 
} 

#prev, #next 
{ 
    position: absolute; 
    width:70px; 
    height: 70px; 
    cursor: pointer; 
    background-position: 0 0; 
    background-repeat: no-repeat; 


} 

#prev 
{ 
    left:50%; 
    background-image: url("http://www.mouserunner.net/free_games/Right_Arrow_Icon_Black.png"); 
} 

#next 
{ 
    right:50%; 
    background-image: url("http://www.mouserunner.net/free_games/Right_Arrow_Icon_Black.png"); 
    background-position: 0 0; 
}

來源

2012-11-16 09:35:28

如何浮動div垂直中心對齊在另一個div

回答

相關問題