Как совместить два изображения в центре HTML, друг над другом?

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

Абсолютное положение делает все изображения друг над другом.

Я рекомендую разделять изображения луны в другом элементе 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

Answer 2

Добро пожаловать в переполнение стека 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;
}

Я знаю, что это не идеальный ответ, но он должен помочь вам начать. Надеюсь, это поможет.