我在获取前50％的CSS工作时遇到问题

Question

我正在尝试对幻灯片进行编程。我创建了在幻灯片之间导航的箭头，但是无法使它们在图像上垂直居中。

.container, #img1{
    width:100%;
    height:auto;
    margin:auto;
}

.previous, .next {
    position:absolute;
    top:50%;
    display: inline-block;
    padding:8px 16px;
    text-decoration:none;
    background-color: white;
    color: black;
    border-style:solid;
    border-width:1px;
    border-color:rgb(73, 73, 73)
}

.next {
    right:8px;
}

.previous {
    left:8px;
}

.previous:hover, .next:hover {
    background-color:gray;
}

<div class='container'>
    <div class='slides'>
        <div class='number' id='number'>1 / 5</div>
        <img id='img1' src='images/image1.jpg'>
        <div id='caption'>Image 1 caption</div>
    </div>
    <a href='javascript:moveToPreviousSlide()'class='previous'>Previous</a>
    <a href='javascript:moveToNextSlide()'class='next'>Next</a>
</div>

Answer 1

您必须给班级容器固定的高度，并把箭头放在顶部：55％。尝试使用此CSS代码。

.container, #img1{
    width:100%;
    height:500px;
    margin:auto;
}
.container {
    position: relative;
}    
.previous, .next {
    ...
    top:50%;
    ...
}
Try this one. I add position relative and it start work)

Answer 2

尝试将transform属性添加到.previous和.next元素：

.previous, .next {
    transform: translateY(-50%);
}

.container可能还需要相对定位：

.container {
    position: relative;
}

Answer 3

以下是一些可能的解决方案：

.previous, .next {
    position: absolute;
    z-index: 50;
    display: inline-block;
    text-decoration:none;
    background-color: white;
    color: black;
    border-style:solid;
    border-width:1px;
    border-color:rgb(73, 73, 73)
}

.next {
    right: 700px;
    top: 113%;
    padding: 8px 29px 8px 29px;
}

.previous {
    left: 48%;
    top: 120%;
    padding: 8px 16px 8px 16px;
}

输出：

.container, #img1 {
    width:100%;
    height:500px;
    margin:auto;
}

.container {
    position: relative;
}

.previous, .next {
    position: absolute;
    z-index: 50;
    display: inline-block;
    text-decoration:none;
    background-color: white;
    color: black;
    border-style:solid;
    border-width:1px;
    border-color:rgb(73, 73, 73)
}

.next {
    right: 700px;
    top: 43%;
    padding: 8px 29px 8px 29px;
}

.previous {
    left: 48%;
    top: 50%;
    padding: 8px 16px 8px 16px;
}

输出：