时间戳

首页 > 解决方案 > 我在让前 50% 的人在 CSS 中工作时遇到问题

html - 我在让前 50% 的人在 CSS 中工作时遇到问题

问题描述

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

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

标签： htmlcss

解决方案

你必须给你类容器固定高度并将你的箭头放在顶部：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)

推荐阅读