如何在轮播中对齐图像中间的按钮？

Question

实际上，我正在尝试制作一个轮播，其中图像的中间会有一个按钮，但无法...请帮助...我正在发布该网站的照片，该照片我正在尝试制作并也在其中发布my code here

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS83RDFBai5qcGcifQ==” alt =“网站图片”>

Answer 1

您想以图片作为背景，并根据其宽度和高度对其进行样式设置。然后，您想要一个文本或内容容器，其名称为position: absolute;，这将导致您的文本覆盖图像。从那里设置display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;，这将使您的文本在图像上居中。

请确保将其包含在具有position: relative的容器中，以便将绝对定位的元素移到容器的边界而不是页面的边界。

<div class="container">
  <img class="image-class"/>
  <div class="text-container">
    your text elements here
  </div>
</div>

.container {
  position: relative;
}

.image-class {
  width: 100%;
  height: auto;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

这应该使您接近所需的内容。我提供了一个带有简单示例的Codepen：https://codepen.io/sean-mooney/pen/ZEGNVrw

希望有帮助！

编辑

上面的示例演示了如何在图像上对齐文本，但是在轮播中，这可能有所不同。概念保持不变，但是实现可能会很棘手。我包括了另一个Codepen，演示了如何在轮播中使用该示例：

https://codepen.io/sean-mooney/pen/jOPogrY

Answer 2

请尝试一下

<div class="container">
  <img class="image-class"/>
  <div class="text-container">
    your text elements here
  </div>
</div>

.container {
  position: relative;
}

.image-class {
  width: 100%;
  height: auto;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}