轮播图中的小圆点居中

最新推荐文章于 2021-09-30 09:10:29 发布

无名氏*

最新推荐文章于 2021-09-30 09:10:29 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/qq_44848423/article/details/113500080

版权

先写一个容器

<ul class="points">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

给ul设置定位，让他的宽度占满父元素，然后再设置text-align: center;就能让它里面的li居中

 .points {
     position: absolute;
     // 设置left和right就是让ul的宽度占满父元素
     left: 0;
     right: 0;
     text-align: center;
     // 解决inline-block带来的间隙问题
     font-size: 0px;
     &>li {
       display: inline-block;
       border-radius: 50%;
       width: 20px;
       height: 20px;
       background-color:rgba(255,255,255,0.5);
       box-shadow: 0 0 4px rgba(25,25,25,0.8);
       vertical-align: bottom;
       margin: 2px;
     }
   }