Javascript 太阳系轨道中心 在我的太阳系模型中，当你点击“切换轨道”时，它会显示所有熟悉地球的轨道，但是你注意到，这个环并不集中在行星的中间，只有在它的外部，我怎么才能使它在中间呢？

函数myFunction（）{
对于（变量i=0；i<500；i++）{
var x=Math.random（）*screen.width；
var y=Math.random（）*screen.height；
var star=document.createElement（'div'）；
star.className='star'；
star.style.left=x+'px'；
star.style.top=y+'px'；
document.body.appendChild（星号）；
}
}

html{
背景色：#000；
溢出x：隐藏；
溢出y：隐藏；
}
.明星{
位置：绝对位置；
宽度：1px；
高度：1px；
背景：白色；
z指数：-1；
}
孙先生{
位置：绝对位置；
高度：100px；
宽度：100px；
最高：50%；
左：50%；
左边距：-50px；
利润上限：-50px；
边界半径：50%；
/*盒影：rgb（204153,0）0px 0px 50px 0px*/
}
#换钮{
位置：绝对位置；
顶部：2个；
左：2px；
}
.地球{
位置：绝对位置；
高度：25px；
宽度：25px；
边界半径：50%；
盒影：绿色0 25px；
}
.地球轨道{
位置：绝对位置；
高度：200px；
宽度：200px；
最高：50%；
左：50%；
左边距：-100px；
利润上限：-100px；
-webkit动画：向右旋转15秒线性无限；
}
.地线{
边框宽度：1px；
边框样式：实心；
边框颜色：白色；
边界半径：50%；
位置：绝对位置；
}
月亮先生{
高度：10px；
宽度：10px；
}
.月球轨道{
最高：50%；
左：50%；
高度：50px；
宽度：50px；
左边距：-12.5px；
边缘底部：-37px；
边框：1px实心rgba（255,0,0,0.1）；
边界半径：50%；
-webkit动画：向右旋转4s线性无限；
}
@-webkit关键帧向右旋转{
100% {
-webkit变换：旋转（360度）；
}
}

消失行为
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'.earth orbit'）.toggleClass（'earth-lines'）；
});
});
切换轨道

然而，这将使月球偏离轨道。调整

类的
左边距
。月球轨道

将解决这个问题。

在css中

.moon-orbit{
  margin-bottom : -14px;
}

---

您将

.earth line

静态放置在

.earth轨道上，因此调整
.earth
和
.moon
的边距是合乎逻辑的解决方案

另一方面，让我们开箱思考。如果我们把
.earth line
作为一个单独的div怎么办？像这样：

<div class="earth-lines">
</div>

<div class="earth-orbit ">
    <div class='moon-orbit'>
      <img class="moon" src="http://space-facts.com/wp-content/uploads/moon-transparent.png" />
    </div>
</div>

最后一件事是调整JavaScript：

<script>
    $(document).ready(function() {
        $("button").click(function() {
            $('.earth-lines').toggle();
        });
    });
</script>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'.earth lines'）.toggle（）；
});
});

在本例中，它将被切换，并将以您希望的方式显示。这是一把小提琴：

附言：奇妙的想法和实施，我喜欢它；）

更新

如何修理太阳

您的代码中有

根据你的评论，图片的链接是

因此，正确的代码应该是
以下是更改：

.moon-orbit {
  top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
  -webkit-animation: spin-right 4s linear infinite;
}

.earth {
position: absolute;
height: 25px;
width: 25px;
margin-left: 20px;
border-radius: 50%;
  box-shadow: green 0 0 25px;
}

这是提琴：
谢谢xD，但我的强迫症发作了，你能帮我把线放在地球中心，把轨道线藏起来吗？哦，你知道为什么太阳会被挤压成这样吗？太阳是看不见的，因为图片5.png的正确URL在地图中不存在code@user4191887我已经更新了CSS代码，最初隐藏了这行，并把它放在中间，看起来就像是在<代码>的中间。sun不在那里，因为sun的URL不正确-您可能在本地拥有该文件。有没有关于如何修复图片的想法？@user4191887我更新了我的帖子。我认为您需要更频繁地检查自己的代码，以检查是否存在类似这样的错误。
<script>
    $(document).ready(function() {
        $("button").click(function() {
            $('.earth-lines').toggle();
        });
    });
</script>

.moon-orbit {
  top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
  -webkit-animation: spin-right 4s linear infinite;
}

.earth {
position: absolute;
height: 25px;
width: 25px;
margin-left: 20px;
border-radius: 50%;
  box-shadow: green 0 0 25px;
}