我尝试制作将位于图片中间的按钮,但问题是这些按钮要么位于页面中间,要么位于图片下方。任何建议如何解决它以及我做错了什么? https://jsfiddle.net/m5g16vt7/
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
imageSlide-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: pink;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8)
}
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<div class="imageSlide-container">
<img class="imageSlide" src="img_nature_wide.jpg" style="width: 100%">
<a class="prev" onclick="plusSlide-button(-1)">❮</a>
<a class="next" onclick="plusSlide-button(1)">❯</a>
</div>
最佳答案
检查下面的片段
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.imageSlide-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: pink;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
transform: translateY(-50%;)
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8)
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="imageSlide-container">
<img class="imageSlide" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width: 100%">
<a class="prev" onclick="plusSlide-button(-1)">❮</a>
<a class="next" onclick="plusSlide-button(1)">❯</a>
</div>
你忘记在 css 类名 imageSlide-container
前添加 .
并且您需要添加 transform: translateY(-50%;)
和 top:50%
以调整箭头垂直居中。
关于html - 图像中间的中心按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44948006/