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以使它们正确地并排显示

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

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

我希望你看起来像这样： - 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;
}

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

5 个答案: