1

我的滑块上的下一个和上一个箭头出现问题。滑块用于随窗口收缩和扩展。除 safari 外，所有浏览器中的一切看起来都很棒。按钮位于滑块的顶部而不是中间。

我已经尝试了我能想到的一切来解决这个问题。有任何想法吗？

这是网站http://upperdeck.dev.warp9inc.com

这是按钮的代码。

.slideshow-wrapper .backward {
    position:absolute;
    left: 10px;
    margin-top:10%;
    background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) 0 0 no-repeat;
    width:50px;
    height:50px;
}

.slideshow-wrapper .forward {
    position:absolute;
    right:10px;
    margin-top:10%;
    background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) -50px 0 no-repeat;
    width:50px;
    height:50px;
}

谢谢！

4

1 回答 1

1

对于绝对定位的元素，您可以像这样将它们居中

top: 50%;
margin-top: -25px

这也适用于水平居中绝对定位的项目，即使父项动态更改大小也将起作用。

您将 top 和/或 left 设置为 50%，然后将 margin-top/margin-left 设置为您要居中的项目宽度的负 1/2。因此，您的 CSS 将如下所示：

/* Make sure .slideshow-wrapper has position: relative; */  
.slideshow-wrapper .backward {
        position:absolute;
        left: 10px;
        top: 50%;
        margin-top: -25px;
        background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) 0 0 no-repeat;
        width:50px;
        height:50px;
    }

    .slideshow-wrapper .forward {
        position:absolute;
        right:10px;
        top: 50%;
        margin-top: -25px;
        background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) -50px 0 no-repeat;
        width:50px;
        height:50px;
    }

这样做是告诉 div 绝对定位在父元素的 50% 处，但由于它使用顶部或左侧边缘，而不是元素的中间，它不会完全居中。因此，您需要将位置向左或顶部偏移元素宽度或高度的一半，以便元素的中间将落在其父元素的 50% 处。

于 2013-05-03T19:45:00.960 回答