最终效果如下图所示
HTML结构如下
<div class="m-slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<img src="" alt="" width="250" height="150">
<div class="pointer"><i></i><i></i><i></i></div>
</div>
这里的silde的宽高未知
1. absolute + text-align
对pointer设置absolute,pointer会收缩为内容的宽度,然后设置宽度为100%,也就是父元素宽度,再设置text-align: center
即可居中。
.m-slide .pointer {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
2. absolute + transform
对pointer依次设置absolute、left: 50%使之左边与父元素的中间对齐,然后用transform: translate(-50%)左移半个自身宽度
.m-slide .pointer {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
完整代码(以第一个为例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.m-slide {
position: relative;
width: 250px;
height: 150px;
background-color: #bdd7ee;
font-size: 0;
}
.m-slide .pointer {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.m-slide i {
display: inline-block;
width: 10px;
height: 10px;
background-color: black;
border-radius: 5px;
}
.m-slide i+i {
margin-left: 5px;
}
</style>
</head>
<body>
<div class="m-slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<img src="" alt="" width="250" height="150">
<div class="pointer"><i></i><i></i><i></i></div>
</div>
</body>
</html>