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

Question

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

Answer 1

您想要将图像作为背景，并根据宽度和高度设置其样式。然后你想要一个文本或内容容器position: absolute;，这将导致你的文本覆盖图像。从那里开始设置display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;，这将使您的文本位于图像的中心。确保它包含在容器中，position: relative以便绝对定位的元素到达容器的边界而不是页面的边界。<div&nbsp;class="container"> &nbsp;&nbsp;<img&nbsp;class="image-class"/> &nbsp;&nbsp;<div&nbsp;class="text-container"> &nbsp;&nbsp;&nbsp;&nbsp;your&nbsp;text&nbsp;elements&nbsp;here&nbsp;&nbsp;</div></div>.container&nbsp;{ &nbsp;&nbsp;position:&nbsp;relative; } .image-class&nbsp;{ &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;height:&nbsp;auto; } .text-container&nbsp;{ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;flex-direction:&nbsp;column; }这应该会让你接近你正在寻找的东西。我提供了一个带有快速示例的 codepen：https ://codepen.io/sean-mooney/pen/ZEGNVrw希望有帮助！编辑上面的示例演示了如何在图像上对齐文本，但是在轮播中这可能有点不同。概念保持不变，但实施可能很棘手。我添加了另一个代码笔，演示如何在轮播中使用该示例：https://codepen.io/sean-mooney/pen/jOPogrY