相关疑难解决方法(0)

我正在寻找一个函数来围绕一个圆圈排列一些元素.
结果应该是这样的:

我想将图标放置在其父级（圆圈）的边缘，如下所示：

我尝试了一些方法，但默认情况下绝对子级放置在其父级的起始位置，如下所示：

甚至父级也有一个圆形 ( border-radius: 50%;)

我不想使用margin或position为每个孩子，因为他们的数量是动态的。

有没有办法将孩子放在父母的边缘？

.circle {
  position: relative;
  width: 300px;
  height: 300px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  border-radius: 50%;
}

.menu {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 5px;
}

.menu li {
  margin: 5px 0;
}

.menu li a {
  display: block;
}

.menu li a img {
  width: 50px;
}

<div class="circle">
  <ul class="menu">
    <li>
      <a …

我正在尝试制作一个圆圈,围绕圆圈会有不同的图像.并且图像将围绕像行星一样的轨道上的圆圈旋转.在悬停那些图像时,我希望旋转停止,我试图在圆心显示一些不同的文本.我画了一个完美的圆圈,但是我无法将这些图像对准圆圈并使其围绕圆圈旋转以获得无限.下图是一个例子.

因此,基本上带有数字的较小圆圈是不同的图像,并且在这些图像的悬停时,一些不同的文本将显示在大圆的中心并且旋转将被停止.我也试图让它响应,所以我把它添加到一个容器中并试图把它放在col-3中.

我遇到了对齐这些图像以及在圆心显示文本的问题.这是我迄今为止尝试过的HTML

        <div class="col-3 mx-auto" style="background-color: grey;">
            <img src="images/location/2x/location.png" style="float: left; ">
            <div class="circle">
                <div class="text-center">

                </div>
            </div>
        </div>

CSS

.circle{
    width: 80%;
    height:0;
    padding-bottom: 80%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD;
}

实现这一目标的更好方法是什么？
有帮助吗？