居中绝对定位的项目

Question

我有一个幻灯片，上面有小圆圈，您可以在其中看到有多少张图片以及哪一张是活动的。这些圆圈是 position: absolute;我正在努力使它们居中。

我该怎么做？

继承人HTML:

<div id="circles">
    <img src="slike/active.png" id="circle1">
    <img src="slike/circle.png" id="circle2">
    <img src="slike/circle.png" id="circle3">
    <img src="slike/circle.png" id="circle4">
</div>

和CSS：

#circle1, #circle2, #circle3, #circle4 {
position: absolute;
top: 600px;
}


#circle1 {
left: 630px;
}

#circle2 {
left: 655px;
}

#circle3 {
left: 680px;
}

#circle4 {
left: 705px;
}

Answer 1

首先你得知道4张图片的总宽度。必须设置此宽度。和 Left: 50% Margin-left: -half width。这就是魔法！不要给每个图像一个单独的 id。相反，您可以使用 #circle img.

访问所有图像

#circles {
    position: absolute;
    top: 600px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
}

Example

Answer 2

#circles {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}

#circle1, #circle2, #circle3, #circle4 {
display: inline-block;
}

/* just to make them round */

#circles img {
  border-radius: 50%;
}
body {
margin: 0;
}

<div id="circles">
    <img src="http://placehold.it/35x35" id="circle1">
    <img src="http://placehold.it/35x35" id="circle2">
    <img src="http://placehold.it/35x35" id="circle3">
    <img src="http://placehold.it/35x35" id="circle4">
</div>

居中绝对定位的项目

centering absolute positioned items

css

centering