Question

所以，我将一组图像排成一个圆圈，我试图让它们留在一个地方，无论屏幕的大小如何。图像是一系列像花一样排列的花瓣，起初我通过使用绝对定位和远离边缘的像素来放置每个花瓣。但是，当我调整图像大小时，花瓣将全部向左或向右移动。然后我用百分比远离边缘放置花瓣。现在每个单独的花瓣远离中心或向中心移动。我试图创建一个div来保持图像整体聚集和定位，但我没有任何运气。关于如何保持花瓣到位的任何建议？这是花瓣代码的样子：

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

有十二个花瓣，每个花瓣的位置略有不同。有谁知道我怎么能把它们放在屏幕上的一个地方？

Answer 1

简单的方法是创建一个绝对位置的块，并用自己的绝对定位将图像放在里面。这会强制图像将其当前位置基于块本身。

这有意义吗？

这是HTML和CSS：

这是一个小提琴： https://jsfiddle.net/g90gbdrp/1/

＆＃13;

Here is a block of math:

$$
a \ne 0
$$

＆＃13;

  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;
  }

＆＃13;

如何在CSS中使一组图像与中心对齐？

1 个答案: