Question

我有一个幻灯片，上面是小圆圈，你可以看到有多少图片，哪一个是活跃的。那些圈子是位置：绝对的;而我正试图让他们集中。

我该怎么做？

Heres 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

#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>

Answer 2

首先，您必须知道4幅图像的整个宽度。必须设置此宽度。并Left: 50% Margin-left: -half width。那是神奇的！不要给每个图像一个单独的id。相反，您可以使用#circle img访问所有图片。

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

Example

以绝对定位的物品为中心

2 个答案: