如何使图像集群与CSS中的中心对齐？

Question

So, I have a group of images arranged in a circle, and I'm trying to get them to stay in one place, regardless of how the screen is resized. The images are a series of petals arranged like a flower, and at first I had each petal placed by using absolute positioning and pixels away from the edges. However, when I resize the image, the petals would all move to the left or right. Then I placed the petals using percentage away from the edges. Now each individual petal moves away from the center or towards the center. I tried to create a div to keep the image as a whole clustered and positioned, but I haven't had any luck with that. Any advice on how I can keep the petals in place? Here's what the petal code looks like:

basics {
position: absolute;
left: 47.5%;
right: 52.5%;
}

there are twelve petals, each with a slightly different position. Does anyone know how I can keep them in one place on the screen?

Answer 1

The easy way out would be to create a block with a position absolute, and position the images inside with their own absolute positioning. This would force the images to base their current position on the block itself.

Does that make sense?

Here's the HTML and CSS:

Here's a fiddle: https://jsfiddle.net/g90gbdrp/1/

  div { border: 3px solid #000000; height: 200px; width: 200px; position: absolute; left: calc(50% - 100px); top: calc(50% - 100px); } img { width: 50px; height: 50px; position: absolute; } #one { top: -2em; left: -2em; } #two { top: -2em; right: -2em; } #three { bottom: -2em; left: -2em; } #four { bottom: -2em; right: -2em; } 

 <div> <img src="http://pngimg.com/upload/cat_PNG1631.png" id="one" /> <img src="http://pngimg.com/upload/cat_PNG1631.png" id="two" /> <img src="http://pngimg.com/upload/cat_PNG1631.png" id="three" /> <img src="http://pngimg.com/upload/cat_PNG1631.png" id="four" /> </div>