如何将光滑的点放置在图像内部？

Question

我的光滑点显示在图像下方并与左侧对齐。我需要它们显示在图像底部的中心。我无法弄清楚这一点，但感觉我很接近。在我的产品页面上，它们显示了我如何需要它们，但在此页面上却没有。

请参阅下面的 CSS/HTML。有什么想法吗？

$('.street-team-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  dots: true,
  prevArrow: '<div class="hc-arrow-left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
  nextArrow: '<div class="hc-arrow-right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>',
});

<!-- Street Team Slick Dots -->.street-team-slider ul.slick-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 0;
}

.street-team-slider .slick-dots li {
  display: inline-block;
  margin: 0 12px;
  font-size: 14px;
  color: #222;
}

.street-team-slider .slick-dots li button {
  font-size: 0px;
  height: 10px;
  width: 10px;
  padding: 0;
  line-height: 0;
  border-radius: 100%;
  border: 2px solid #F00;
  background-color: transparent;
  cursor: pointer;
  opacity: 1;
}

.street-team-slider .slick-dots li.slick-active button {
  background-color: #fff;
  opacity: 1;
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<!-- Hero Slider Start-->
<div class="street-team-slider">
  <div><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Our_Story.jpg?v=1480890581"></div>
  <div><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Our_Story.jpg?v=1480890581"></div>
  <div><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Our_Story.jpg?v=1480890581"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Answer 1

使该点的父 div 绝对，并将其置于主图像 div 的中心，并使其相对。