Question

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

以下是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

欢迎堆栈溢出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;
}

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

Answer 2

绝对位置使所有图像彼此重叠。

我建议将月球图像分成不同的div并将徽标分开。

<div id="header">
         <div class="MOON">
               <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">
        </div>
        <div class"logo">
                <img src="images/header.png"/>
        </div>
    </div>

就像，您将有一种更好的方法来编辑各种图像。之后，对于CSS，您只需要添加

text-align:center

到达您的#header，它将正确使图像居中。 https://codepen.io/anon/pen/MZZjZX

如何在HTML的中心彼此对齐对齐两个图像？

2 个答案: