html - 如何将两个图像对齐在 HTML 的中心，彼此重叠？

Question

我想对齐两个图像，月亮和 Logo 。我希望所有 4 个月亮图像都位于 Logo 上方。我希望所有图像都位于页面的中心。我认为我的代码是完全错误的，如果有人可以帮助我从头开始甚至使用现有代码。谢谢!

这里是 HTML 代码:

   <section id="home" class="home-particles">

         <div id="header">
                   <img class="floating" src="images/moon.png">
                    <img class="floating" src="images/moon.png">
                    <img class="floating" src="images/moon.png">
                    <img class="floating" src="images/moon.png">
                    <img src="images/header.png"/>
        </div> <!-- /header -->  

这是 CSS:

#home {
    background: #020507;
    width: 100%;
    height: 100%;
    min-height: 800px;
    z-index: 600;
    position: relative;
}

#home.home-particles {
    background: #000000;
    overflow: hidden;
}
#home.home-particles .pg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    opacity: 1;
}
#home.home-particles .shadow-overlay {
    display: none;
}

#header {
    position:relative;
    height: 100%;
    width:100%;
}
#header img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

Answer 1

欢迎来到 Stack Overflow HiranyaGarbh，这里是您的问题所在。

#header img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

控制#header 标签内的所有图像。这包括您的四个月亮图像和您的 header.png。您拥有的代码将所有这些都放在彼此之上。根据您的描述，您希望 header.png 保持原样并将月亮图像移动到其上方。为此，您需要为每张月球图片命名一个唯一的名称(为每张图片分配一个类或 ID)，然后为其指定唯一的位置。您可以使用上面的定位将 header.png 保持在同一位置，但您可能还想给它一个唯一的名称并使用上面的位置 CSS 定位它。所以它可能看起来像这样。

<div id="header">
  <img id="moon1" class="floating" src="images/moon.png">
  <img id="moon2" class="floating" src="images/moon.png">
  <img id="moon3" class="floating" src="images/moon.png">
  <img id="moon4" class="floating" src="images/moon.png">
  <img id="main-img" src="images/header.png"/>
</div>

#main-img {
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

#moon1 {
  unique positioning here...
}

#moon2 {
  unique positioning here...
}

#moon3 {
  unique positioning here...
}

#moon4 {
  unique positioning here...
}

#main-img, #moon1, #moon2, #moon3, #moon4 {
  position: absolute;
}

我知道这不是一个完美的答案，但它应该可以帮助您入门。希望对您有所帮助。