我的圆点显示在图片下方,并向左对齐.我需要它们显示在图像的中心朝向底部.我搞不清楚这件事,但我觉得我就快到了.在我的产品页面上,它们显示了我是如何需要它们的,但不是在这个页面上.

请参阅下面的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/slick-carousel@1.8.1/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/slick-carousel@1.8.1/slick/slick.min.js"></script>

推荐答案

将点父div设为绝对,并使其位于主图像div的中心,并使其成为相对的.

Html相关问答推荐

VBA从公共Google Drive地址下载文档-.Click事件(?)

使用无限数量的元素创建特定的CSS网格

如何在用css使用网格视图时设置宽度?

这<;td&>如何溢出<;表>;?

在<;style&>中列出的三种字体中,只有两种显示

按钮之间的HTML文本居中不正确

CSS:双面元素未正确显示边框

HTML,CSS-阻止按钮在单击时向上移动

使用单个粗体字符串向段落添加页边空白

如果您将带有 html 标签的字符串数据(name : test) 放在 `

为什么 `::before` 在使用内容 `url(svg)` 时会增加一些高度

并排对齐两个文本区域列

如何使我的设计适合与我的框架尺寸不同的视口?

如何从 razor 页面打开 html 页面

如何让 backdrop-filter: blur() 效果在 iOS 上运行?

需要禁用聚焦输入的工具提示(jquery)

使用模板循环每行列出 3 个 bootstrap 卡

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示?

如何向上移动图像并溢出图像的一部分而另一部分不溢出

用 flexbox 和 overflow 覆盖