Question

我的滑块上的下一个和上一个箭头出现问题。滑块可以随窗口缩小和扩展。除了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;
}

谢谢！

Answer 1

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

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

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

您将顶部和/或左侧设置为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％。

尝试在绝对定位元素上使用垂直对齐中间

1 个答案: