html - 如何浮动在另一个div中对齐的div垂直中心

Question

我有一个幻灯片。我还有一个上一个和下一个按钮。幻灯片会根据其显示的屏幕尺寸重新调整大小。我需要上一个和下一个按钮始终位于幻灯片的中心。如果我添加position: absolute;它在更大的屏幕上看起来不正确。

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

Answer 1

我假设幻灯片是全屏的，因为上一个/下一个元素在幻灯片之外。

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

您需要将顶部定位到 50% 并偏移锚点的高度。

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

Answer 2

正如我所见，它没有正确定位，因为

    <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>

Answer 3

试试这个，你应该稍微调整一下css，特别是margin-left，让它们看起来并排正确

演示演示

#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;
}

Answer 4

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

这些应该在里面

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

然后在css里面

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

我希望它能解决你的问题

Answer 5

我希望你看起来像这样：-演示

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