响应式幻灯片：将切换按钮对齐至幻灯片图片垂直中点

解决方案 #

要让幻灯片切换按钮对齐到每张幻灯片内图片的垂直中点且保持响应式，可按以下步骤修改代码：

1. 调整按钮位置：将prev和next按钮移入每个.mySlides容器内部，确保只有当前显示的幻灯片按钮可见，避免重叠。
2. 设置定位参考：给.mySlides添加position: relative，让按钮以幻灯片容器为定位基准。
3. 精确计算垂直位置：用calc()结合视口单位和内边距值定位按钮，再通过transform: translateY(-50%)抵消按钮自身高度的影响，实现完美居中。
4. 修正水平位置：调整按钮的左右偏移量，使其对齐页面两侧的同时，与幻灯片边缘保持相对位置。

修改后的完整代码 #

HTML

<div class="slideshow-container">
  <div class="mySlides">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image"></div>
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
    <p class="heading">Lorem ipsum</p>
    <p class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
  <div class="mySlides">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image"></div>
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
    <p class="heading">Lorem ipsum</p>
    <p class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
  <div class="mySlides">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image"></div>
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
    <p class="heading">Lorem ipsum</p>
    <p class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
</div>
<div class="dot-container">
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
</div>

CSS

@import url("https://use.typekit.net/yoj6eqg.css");
* {
  box-sizing: border-box
}

body {
  font-family: Assistant, sans-serif;
  margin: 0
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
  width: 100%;
  margin: auto;
}

/* Slides */
.mySlides {
  display: none;
  padding: 30px 30px 30px 30px;
  text-align: center;
  width: 62.5%;
  margin: auto;
  position: relative; /* 设置为按钮的定位参考 */
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  /* 计算图片中点垂直位置：幻灯片顶部内边距 + 图片高度的一半 */
  top: calc(30px + 30vh);
  transform: translateY(-50%); /* 抵消按钮自身高度，实现居中 */
  width: auto;
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* 调整按钮水平位置 */
.prev {
  left: -30px; /* 对齐页面左侧 */
}
.next {
  right: -30px; /* 对齐页面右侧 */
  border-radius: 3px 0 0 3px;
}

/* 按钮 hover 效果 */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

.image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 60vh;
}

/* 指示器容器 */
.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}

/* 指示器样式 */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot:hover, .active {
  background-color: #90bd49;
}

/* 文本样式 */
.text {
  color: black;
  text-align: left;
}

.heading {
  text-align: center;
  color: #7bd934;
  font-size: 30px;
  font-family: Assistant, sans-serif;
  padding: 10px;
}

/* 移动端适配 */
@media screen and (max-width:767px) {
  .heading {
    font-size: 20px;
  }
  .text {
    font-size: 12px;
  }
  .prev,
  .next {
    font-size: 15px;
    padding: 10px;
    top: calc(30px + 30vh); /* 保持响应式计算 */
  }
  .mySlides {
    padding: 30px 50px 30px 50px;
  }
}

JavaScript

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

关键说明 #

• 按钮移入幻灯片内部后，仅当前显示的幻灯片按钮会被渲染，避免了多按钮重叠问题。
• calc(30px + 30vh)确保按钮垂直位置始终对齐图片中点：30px是幻灯片顶部内边距，30vh是图片高度（60vh）的一半。
• transform: translateY(-50%)自动抵消按钮自身高度的影响，无需手动计算偏移量。
• 视口单位（vh）让布局自动适配不同屏幕尺寸，无需额外媒体查询调整垂直位置。

内容的提问来源于stack exchange，提问作者zoterpeter