html - 图像中间的中心按钮

Question

我尝试制作将位于图片中间的按钮，但问题是这些按钮要么位于页面中间，要么位于图片下方。任何建议如何解决它以及我做错了什么？ 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)">&#10094;</a>
  <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

Answer 1

检查下面的片段

* {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)">&#10094;</a>
      <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

你忘记在 css 类名 imageSlide-container 前添加 .并且您需要添加 transform: translateY(-50%;) 和 top:50% 以调整箭头垂直居中。