центрирование позиций с абсолютным позиционированием

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. Это волшебство! Не указывайте каждому изображению отдельный идентификатор. Вместо этого вы можете получить доступ ко всем изображениям с помощью #circle img.

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

Example