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

Question

实际上我正在尝试制作一个旋转木马，其中图像中间会有一个按钮但不能...请帮助...我正在发布我正在尝试制作的网站的照片并发布 my code here

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;
}

这应该会让您接近您要查找的内容。我已经包含了一个代码笔和一个简单的例子：https://codepen.io/sean-mooney/pen/ZEGNVrw

希望对您有所帮助！

编辑

上面的示例演示了如何在图像上对齐文本，但是在轮播中这可能会有些不同。这个概念保持不变，但实施起来可能很棘手。我已经包含了另一个代码笔，演示了如何在轮播中使用该示例：

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

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

How to align button on middle of the image in the carousel?

html

css

twitter-bootstrap-3