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

时间:2012-11-16 09:11:41

标签: html css

我有幻灯片。我也有一个上一个和下一个按钮。 幻灯片显示根据显示的屏幕大小重新调整大小。 我需要上一个和下一个按钮始终位于幻灯片放映的中心。 如果我添加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;
}

5 个答案:

答案 0 :(得分:3)

我假设幻灯片是全屏的,因为上一页/下一页元素不在幻灯片中。

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

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

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

答案 1 :(得分:1)

因为我认为它没有正确定位,因为

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

答案 2 :(得分:0)

尝试这个,你应该稍微调整一下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;
}

答案 3 :(得分:0)

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

这些应该在

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

然后在css里面

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

我希望它能解决您的问题

答案 4 :(得分:0)

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