最终效果如下图所示
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>
5147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
