1

I have a slideshow and on it are the small circles where u can see how many pics there are and which one is active. Those circles are position: absolute; and i'm trying to make them be centered.

How do i do that?

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>

And CSS:

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


#circle1 {
left: 630px;
}

#circle2 {
left: 655px;
}

#circle3 {
left: 680px;
}

#circle4 {
left: 705px;
}
Branka
  • 125
  • 3
  • 12
  • 1
    possible duplicate of [How to center a "position: absolute" element](http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element) – Sebastian Simon May 25 '15 at 23:55

2 Answers2

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>
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
0

First of all, you have to know the whole width of the 4 images. This width has to be set. And Left: 50% Margin-left: -half width. Thats the magic! Don't give each image a separate id. Instead you can access all images with #circle img.

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

Example