如何浮动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

回答

相关问题